[javascript] image change met maps

[Promy]

Ik wil graag een dimmer in een domoticasysteem aansturen via een webpagine.
Hiervoor wil ik (naar analogie van Niko) dit doen door te klikken op een image:
Deze afbeelding is een bol in het midden die afhankelijk van het lichtvolume meer gekleurd is en ook een nummer bevat (bv 50 als hij 50% gedimd is).
Links staat er een bolletje met minteken en rechts eentje met een plusteken.

Nu wil ik graag dat de image aangepast wordt: bij het klikken op de min moet deze met het lagere nummer geladen worden (in het vb 40) en bij de plus de hogere.
Hiervoor dacht ik gebruik te maken van 2 image maps (eentje over de + en eentje over de - ) en er een stukje code achter te hangen.
ik heb voorlopig volgende:

JavaScript:

 
var namesVec2 = new Array("licht_00.png", "licht_10.png", "licht_20.png", "licht_30.png", "licht_40.png", "licht_50.png", "licht_60.png", "licht_70.png", "licht_80.png", "licht_90.png", "licht_100.png");
function ImgUp(ima){
// divides the path
nr2 = ima.getAttribute('src').split('/');
// gets the last part of path, ie name
nr2 = nr2[nr2.length-1];
switch(nr2){
case namesVec[0]:ima.setAttribute('src',namesVec[1]);
case namesVec[1]:ima.setAttribute('src',namesVec[2]);
case namesVec[2]:ima.setAttribute('src',namesVec[3]);
case namesVec[3]:ima.setAttribute('src',namesVec[4]);
case namesVec[4]:ima.setAttribute('src',namesVec[5]);
case namesVec[5]:ima.setAttribute('src',namesVec[6]);
case namesVec[6]:ima.setAttribute('src',namesVec[7]);
case namesVec[7]:ima.setAttribute('src',namesVec[8]);
case namesVec[8]:ima.setAttribute('src',namesVec[9]);
case namesVec[9]:ima.setAttribute('src',namesVec[10]);
case namesVec[10]:ima.setAttribute('src',namesVec[10]);
}
;
}

en in de html:

HTML:

<img src="licht90.png" border="0" usemap="#map03" class=imgV5>
<map name="map03" id="map03"> <area nohref shape="rect" coords="5,4,37,51" onclick="ImgUp(this)" ><area nohref shape="rect" coords="89,3,120,50" onclick="alert(this);"></map>

Maar dit werkt blijkbaar niet...
volgens mij zit het probleem dat de waarde van de image (this) geen inhoud heeft.... want bij die 2e map staat er niks in de alert box.

Heeft er iemand een idee hoe dit op te lossen? (of een betere manier om dit aan te passen?)

[ Voor 0% gewijzigd door Promy op 17-02-2012 18:52 . Reden: code tags toegevoegd ]

[RobIII]

Allereerst: WTF, waarom zo'n big-ass switch en array als je aan een integer genoeg hebt? Parse de integer uit de src, tel er 1 bij op/trek er 1 af (of 10 of...) en zet de src met de nieuwe waarde.

This zal, vermoed ik, niet "niets" zijn (wie debugged er anno 2012 nog met alerts?); console.log 't ding eens ofzo dan zul je zien dat 't je area/imagemap is (wat nogal wiedes is, daar zet je 't onclick attribuut immers ook op).

Verder: als je code post, gebruik dan code tags a.u.b. en probeer even wat te debuggen voor je een topic opent Debuggen: Hoe doe ik dat?

[ Voor 8% gewijzigd door RobIII op 17-02-2012 18:41 ]