javascript thread: Trouble with highlighting adn unhighlighting multiple objects on onmouseover()/onmouseout()
Hi,
The main issue was that you were re-using global variables before the fade
in/out had finished e.g. 'highlighting', 'lowlighting' & 'theobject'
Try the following...
<html>
<head>
<script language=javaScript>
var intervals=new Object();
function high(img){
id=img.id;
if(intervals[id] != null){cancelInterval(intervals[id]);}
intervals[id]=setInterval("highlightit(\"" + id + "\");", 1);
}
function low(img){
id=img.id;
if(intervals[id] != null){clearInterval(intervals[id]);}
intervals[id]=setInterval("lowlightit(\"" + id + "\");", 1);
}
function highlightit(id){
var img=document.getElementById(id);
if(img.filters.alpha.opacity<100){
img.filters.alpha.opacity+=5;
}
else{
clearInterval(intervals[id]);
intervals[id]=null;
}
}
function lowlightit(id){
var img=document.getElementById(id);
if(img.filters.alpha.opacity>20){
img.filters.alpha.opacity-=5;
}
else{
clearInterval(intervals[id]);
intervals[id]=null;
}
}
</script>
<STYLE type=text/css>.im
{
FILTER: alpha(opacity=20)
}
</STYLE>
</head>
<body bgcolor="black">
<div id="aragorn"
style="position:absolute;visibility:visible;top:50px;left:300px">
<img src="aragorn.jpg" class=im id=img1 onmouseover="high(this)"
onmouseout="low
(this)">
</div>
<div id="arwen"
style="position:absolute;visibility:visible;top:125px;left:25px">
<img src="arwen.jpg" class=im id=img2 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="frodo"
style="position:absolute;visibility:visible;top:250px;left:250px">
<img src="frodo.jpg" class=im id=img3 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="samwise"
style="position:absolute;visibility:visible;top:50px;left:500px">
<img src="samwise.jpg" class=im id=img4 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="merry"
style="position:absolute;visibility:visible;top:200px;left:500px">
<img src="merry.jpg" class=im id=img5 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="peregrin"
style="position:absolute;visibility:visible;top:350px;left:50px">
<img src="peregrin.jpg" class=im id=img6 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="gandalf"
style="position:absolute;visibility:visible;top:300px;left:450px">
<img src="gandalf.jpg" class=im id=img7 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="gimli"
style="position:absolute;visibility:visible;top:15px;left:95px">
<img src="gimli.jpg" class=im id=img8 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="legolas"
style="position:absolute;visibility:visible;top:150px;left:250px">
<img src="legolas.jpg" class=im id=img9 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="eomer"
style="position:absolute;visibility:visible;top:100px;left:140px">
<img src="eomer.jpg" class=im id=img10 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="eowyn"
style="position:absolute;visibility:visible;top:125px;left:575px">
<img src="eowyn.jpg" class=im id=img11 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="faramir"
style="position:absolute;visibility:visible;top:325px;left:300px">
<img src="faramir.jpg" class=im id=img12 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="boromir"
style="position:absolute;visibility:visible;top:250px;left:50px">
<img src="boromir.jpg" class=im id=img13 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id="theoden"
style="position:absolute;visibility:visible;top:135px;left:390px">
<img src="theoden.jpg" class=im id=img14 onmouseover="high(this);"
onmouseout="low
(this);">
</div>
<div id=debug style="color:yellow"></div>
</body>
</html>
HTH,
Chris
View Cart
