Menu
Hey all, I’ve got a set of panels that highlight when you scroll over them, and are meant to stay highlighted after clicking them.. then, after clicking them a second time, they are meant to go back to their original state.
I have it working fine with one panel, but the way it’s set up now, the same on/off variable (inUse) is affected by clicking any of the panels, which screws it up if you want to turn more than one “on” at a time.
I’m thinking I need to make an array to set up a corresponding variable for each of the panels, but I can’t quite figure out how to do it. Any suggestions?
The relevant code is
[code=php]var inUse = -1;
function flip() {
inUse = inUse * (-1)
}
function on (location, state) {
if (inUse == -1) {
document.images[swap_image[location]].src = button[state].src;
}
}
function off (location, state) {
if (inUse == -1) {
document.images[swap_image[location]].src = button[state].src;
}
}
with
[code=php]<body>
<div ID=”panel_1″>
<span onMouseOver=”(on(0,1))”, onClick=”(flip())”, onMouseOut=”(off(0,0))”></span></a>
</div>
<div ID=”panel_2″>
<span onMouseOver=”(on(1,3))”, onClick=”(flip())”, onMouseOut=”(off(1,2))”></span></a>
</div>
<div ID=”panel_3″>
<span onMouseOver=”(on(2,5))”, onClick=”(flip())”, onMouseOut=”(off(2,4))”></span></a>
</div>
<div ID=”panel_4″>
<span onMouseOver=”(on(3,7))”, onClick=”(flip())”, onMouseOut=”(off(3,6))”></span></a>
</div>
Thanks in advance!