Grafisk rollover med ringe båndbredde /2

Dette eksempel bygger på min artikel over ovennævnte emne, Rollover med ringe båndbredde

Mit argument for at bruge denne teknik, når der skal laves en grafisk rollover, er de enorme besparelser i overførselstid, der er forbundet med kun at bruge 2 grafikker i stedet for, i dette eksempels tilfælde, 2 gange 6 grafikker.

I dette konkrete tilfælde har jeg – for at kunne sammenligne – lavet 2 almindelige knapper, én for off-tilstanden og én for on-tilstanden. Disse knappers tyngde er hver små 1800 bytes. For at lave en sædvanlig rollover med 6 punkter skal der derfor overføres 12 gange 1800 bytes, i alt 21.600 bytes. Ved at bruge den teknik, jeg har beskrevet i ovennævnte artikel kan jeg nøjes med to grafikker, i alt ca. 5000 bytes.

For at bevare den størst mulige designmæssige fleksibilitet har jeg lavet den grafiske menu sådan, de enkelte menupunkters tekst er almindelige linktekster, der er positioneret således, at de står nogenlunde midt på knapperne.

Det medfører, at jeg er nødt til at have mine mouseover- og mouseout-funktioner både i map-markøren og på linkteksten.

Opdatering

I februar 2006 er denne artikel opdateret. Hovedårsagen til opdateringen er upåagtet fejl i JavaScript-koden. Fejlen bestod i, at der ikke var nogen angivelse af enhed i forbindelse med målene for clipping rektangelet, se de nu indsatte enheder markeret med rødt i koden herunder. OBS! der skal være et mellemrum efter de røde px.

At fejlen har været upåagtet skyldes meget enkelt, at fortidens browsere er mere fejltolerante en nutidens. Jeg erkendte først problemet, da jeg skulle bruge scriptet til andet formål, og ikke kunne få det til at virke i Firefox browseren.

<script type="text/javascript">
var dom = (document.getElementById) ? true : false;
if (!dom || document.layers){
  alert("Denne webside fungerer kun 
  -->  \ni moderne browsere.")
}
arealArray = new Array()

function setAreal(nr,fra,til) {
  arealArray[nr] = new Array();
  arealArray[nr][0] = fra;
  arealArray[nr][1] = til;
}
setAreal(1,10,40);
setAreal(2,50,80);
setAreal(3,90,120);
setAreal(4,130,160);
setAreal(5,170,200);
setAreal(6,210,240);
clLeft = 0;
clRight = 170;

function mover(nr,on) {
  menupunkt = document.getElementById('menuon').style 
  if (!on) { 
  menupunkt.visibility = "hidden"; 
  return 
  }
  clTop = arealArray[nr][0];
  clBot = arealArray[nr][1];
  menupunkt.clip = "rect(" + clTop + "px " + clRight + 
  -->  "px " + clBot + "px " + clLeft + "px)";
  menupunkt.visibility = "visible" 
}
</script>

Nyt script

Den ovenfor omtalte opdatering af scriptet beskriver jeg på websiden: Highlighting af hotspots.

Yderligere bemærkninger

For at bevare den størst mulige designmæssige fleksibilitet har jeg lavet den grafiske menu sådan, de enkelte menupunkters tekst er almindelige linktekster, der er postioneret således, at de står nogenlunde midt på knapperne.

Det medfører, at jeg er nødt til at have mine mouseover- og mouseout-funktioner både i map-markøren og på linkteksten.

Denne side er senest opdateret: 1. September, 2006