Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



Tipboks uden JavaScript

Sat på siden 18-03-2005

Du kender det måske, at du er på en hjemmeside, hvor nogle ord er markeret med rødt, eller der er små billeder af spørgsmålstegn i teksten. Når du fører musen hen over, dukker der en hjælpetekst op.

Sådanne tipbokse er ofte lavet med JavaScript, men det er ikke alle, der har slået JavaScript-fortolkeren til i deres browser, så det er altid (ifølge min mening) bedst at undgå at bruge det, hvis der er andre muligheder.

Jeg pudsede Per A på opgaven, og han løste den med bravour ved hjælp af en title-attribut og stylesheets.

Se løsningen her:

www.tips-og-tricks.com/eksempler/tip.html

Eneste "øv" er, at Opera viser ordet "title" foran tip-teksten, men det er faktisk Operas fejl, for både html og css validerer.

Vil du vide, hvordan det er blevet gjort?

Jeg har lavet en pseudoclass, som hedder "tip". CSS-koden ser sådan her ud:

.tip{
 cursor: pointer;
 color: Red;
}

I html-teksten har jeg indsat en span-tag i teksten:

<p>Bla bla bla <span class="tip" title="Hjælpeteksten er her">det røde ord her</span> bla bla bla fortsat.</p>

Du kan enten sætte pseudo-classen "tip" i et selvstændigt stylesheet, som du linker til, eller i head i html-dokumentet:

<style type="text/css">
.tip{
 cursor: pointer;
 color: Red;
}

</style>

Tak til Per A for tippet :-)

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|