Highlighting af hotspots på et billede

Julemandens nissedrevne gavetransporter anno 2006

Før musen hen over transporterens midterakse.

Opdateret script

Det eksempel, jeg beskriver på websiden Grafisk rollover med ringe båndbredde /2 og i den oprindelige artikel, Grafisk rollover med ringe båndbredde er udmærket for så vidt der er tale om rektangulære grafiske elementer.

Det oprindelige script er baseret på konstante clip-værdier for top og bottom, hhv. left og right.

Men hvad nu hvis vi vil bruge teknikken til vilkårlige hotspots på en grafisk flade?

Denne side er illustreret med et eksempel, hvor du, hvis du fører musen hen over rumfærgens midterakse, dels vil kunne se et alternativt udsnit af billedet, og dels en lille tekst under billedet, der skal foregive at indeholde noget information om det aktuelle udsnit.

For at gøre det har vi brug for at udvide clip-funktionen til at omfatte alle fire clip-værdier:

<script type="text/javascript">

var dom = (document.getElementById) ? true : false;
if (!dom || document.layers){
alert("Denne webside fungerer kun \ni moderne browsere.")
}
function nytIndhold(objekt,text){
  document.getElementById(objekt).firstChild.nodeValue=text;
  return;
}
textArray=new Array("Lager af nisser, der skubber bag på 
-->  transporteren","Julegavebeholder","NASA-designet 
-->  automatisk dispenser af risengrød til fodring af 
-->  skubbenisser", "Julemandens kabine","Good Child/Bad 
-->  Child autodetektor")

arealArray = new Array()

function setAreal(nr,ytop,xright,ybottom,xleft) {
  arealArray[nr] = new Array();
  arealArray[nr][0] = ytop;
  arealArray[nr][1] = xright;
  arealArray[nr][2] = ybottom;
  arealArray[nr][3] = xleft;
}
  setAreal(1,100,137,194,42);
  setAreal(2,100,227,165,160);
  setAreal(3,100,273,165,237);
  setAreal(4,100,384,171,347);
  setAreal(5,100,445,171,391);
    
function mover(nr,on) {
nytIndhold('tekst',textArray[nr-1]);
menupunkt = document.getElementById('menuon').style 
  if (!on) { 
    menupunkt.visibility = "hidden"; 
    nytIndhold('tekst','Før musen hen over transporterens 
    -->  midterakse.');
    return 
  }
  
  clTop = arealArray[nr][0];
  clRight = arealArray[nr][1];
  clBot = arealArray[nr][2];
  clLeft = arealArray[nr][3];
  menupunkt.clip = "rect(" + clTop + "px " + clRight 
  -->  + "px " + clBot + "px " + clLeft + "px)";
  menupunkt.visibility = "visible" 
}

</script>

Jeg har tilføjet et funktionskald til mover()-funktionen. Denne nye funktions formål er at indsætte noget ny tekst i tekstafsnittet med en id="tekst".

Det, der er afgørende for funktionaliteten af denne applikation er, at vi kan holde styr på hvad der er koordinater i vores map-markør, og hvad der er clipværdier. Det er de samme tal for hver hotspot, men rækkefølgen er forskellig. For eksempel ser map-markøren for billedet herover således ud:

<map id="rollover" name="rollover">
<area coords="42,92,137,194" onmouseover="mover(1,true)" 
onmouseout="mover(1,false)" alt="" />
<area coords="160,112,227,165" onmouseover="mover(2,true)" 
onmouseout="mover(2,false)" alt="" />
<area coords="237,113,273,166" onmouseover="mover(3,true)" 
onmouseout="mover(3,false)"  alt="" />
<area coords="347,103,384,171" onmouseover="mover(4,true)" 
onmouseout="mover(4,false)" alt="" />
<area coords="391,100,445,171" onmouseover="mover(5,true)" 
onmouseout="mover(5,false)" alt="" />
</map>

Koordinaterne refererer – i rækkefølge – til x-værdien og y-værdien for øverste venstre hjørne og x-værdien og y-værdien for nederste højre hjørne, i hvert tilfælde for en af de fem hotspots.

Derimod skal clipværdierne passeres som – fortsat i rækkefølge –

  1. beskæringsrektangelets afstand fra toppen af billedet,
  2. afstanden mellem billedets venstre kant og beskæringsrektangelets højre kant,
  3. afstanden fra billedets overkant til beskæringsrektangelets underkant og
  4. afstanden fra biledets venstre kant til beskæringsrektangelets højre kant.

Denne side er senest opdateret: 1. September, 2006