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 :-)