En kort forklarende tekst vedrørende et ord eller en sætning,
som man gerne vil fortælle en smule mere om, kan indsættes
ved hjælp af title
-attributten:
ISS.
<span title="Den Internationale Rumstation">ISS</span>
Problemet med den attribut er, dels at det tager en smule tid før indholdet (attributtens værdi) dukker op på skærmen, og dels at det er en browserfunktion, og indholdet derfor ikke er tilgængeligt for stylesheet formatering.
Til gengæld kan og bør vi formatere det element, title
er knyttet til: NASA, således at det er synligt for
læseren, at der knytter sig en særlig egenskab til denne forkortelse.
<span class="note_1" title="National Aeronautics and Space Administration"> NASA</span>
.note_1 {border-bottom: thin dashed maroon;}
Vil du have et større register at spille på, er der ingen vej uden om en DHTML JavaScript løsning: LEO Low Earth Orbit.
<span class="trigger" onclick="visNote(1)">LEO <span class="note" id="note1">Low Earth Orbit</span> </span>
.note_2 { position:absolute; /* I forhold til .trigger */ left:3em; top:1em; z-index:3; display:none; padding:3px; border:1px solid black; color:black; background:#ffff99; white-space:nowrap; /* Forhindre linieombrydning} .trigger { position:relative; color:maroon; border-bottom:1px dotted; cursor:help;}
Script
function visNote(nr) { if (document.getElementById('note'+nr).style. --> display == "inline") { document.getElementById('note'+nr). --> style.display="none"; } else { document.getElementById('note'+nr). --> style.display="inline"; } }
Hvis du hellere vil vise din note ved mouseover og have den til at forsvinde igen ved mouseout : Space ShuttleRumfærge.
Html-kode
<span class="trigger" onmouseover="showNote('note2', true)" onmouseout="showNote('note2', false)"> Space Shuttle<span class="note_2" id="note2"> Rumfærge</span></span>
CSS-koden er den samme som i foregående eksempel.
Script
function showNote(objekt, onoff) { if (onoff) { document.getElementById(objekt). --> style.display="block"; } else { document.getElementById(objekt). --> style.display="none"; } }
Denne side er senest opdateret: 25. September, 2008