Sådan laver du bobletekster

Hop længere ned på siden, til:

Siden er opdateret 9. 8. 2005

erik.gif

Når man indsætter et billede på en html-side, er det ikke noget problem at få en bobletekst til at poppe op, når musen kommer ind over billedet.
Alt, hvad der skal til er, at skrive den ønskede tekst i billedkaldet som en parameter til attributten title. Det totale kald til billedet til venstre kommer så til at se sådan ud:

<img src="erik.gif" width="81" height="110" alt="erik.gif" title="Et billede af Erik Ginnerskov" />

Prøv at lade musen køre ind over billedet til venstre herover.

Hvis du tilføjer et link til billedet, fungerer det også uden problemer.

Men hvis det er en stump tekst med et tilknyttet link, sættes denne bobletekst ind i link-definitionen:

Dette link fører ikke nogen steder hen, det er blot lavet for at illustrere.

Du koder linket på denne måde:

<a href="et_sted_på_nettet.dk" title="Noget bobletekst">link</a>

Man kan også lave bobletekster på tekst, der ikke er et link. Det kan f.eks. være en forklarende tekst til et svært ord:

Som tv-mekaniker kan man have stor nytte af et oscilloscop.

Prøv at lade musen komme ind over ordet "oscilloscop" i linjen herover og se, hvad der sker.

Løsningen er at bruge det tag, der hedder <span></span>. Det har vi haft fat i før, men nu skal vi bruge attributten title.

Du koder det på denne måde:

<span title="Et oscillo....">oscilloscop</span>

^ Tilbage til sidens top


Avancerede løsninger

Løsningen herover er lavet i ren html og den virker i alle browsere. Herunder har jeg lagt et par links til nogle javascript-funderede løsninger, der er flotte, men de virker ikke allesammen i alle browsere (i Opera virker de slet ikke - hos mig).

Nice titles
Nice titles er en nogenlunde simpel løsning lavet med en kombination af et javascript og et css.
Løsningen virker fint både i IE og Mozilla, men i Opera virker det slet ikke - hos mig.

Nice titles virker kun på links - altså ikke på span-titler eller image-titler.
overLIB
overLIB er en lidt mere avanceret løsning lavet alene med javascript.
Noget af det virker i både Mozilla, Opera [1] og IE. Andet af det virker kun i IE.

Jeg har ikke prøvet at have overLIB installeret, så jeg kan ikke sige noget om titeltypebegrænsninger.

1] I Opera vises desværre også den normale title, hvilket virker forstyrrende, da denne i de fleste overLIB-konfigurationer overlapper den flotte titel.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen februar 2001
Hjemmesideskolen
Du er her: Forsiden - html - Sådan laver du bobletekster
Brugere lige nu: 1
Home Mail