Før musen hen over transporterens midterakse.
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 –
Denne side er senest opdateret: 1. September, 2006