Vis og skjul en note ved click og mouseover

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;}

Dhtml noter

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.

HTML-kode

<span class="trigger" onclick="visNote(1)">LEO
<span class="note" id="note1">Low Earth Orbit</span>
</span>

CSS-kode

.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";
  }
}

Mouseover

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