Hello,
I'm a newbie and have just spent about 4 hours making the attached code work. The only problem is that it works the opposite of how it should.
I have an image map and i loop through and place images to the images that i want to showup when a mouse rolls over a hotspot.
my problem is that in the loop i have:
for(var i=0;i<hotareas.length;i++)
{
hotareas[i].onmouseover = mouseIsOver;
hotareas[i].number = i;
allMouseOvers[i] = new Image();
allMouseOvers[i].number = i;then my mouseIsOver funciton looks like:
function mouseIsOver()//how do i pass something here?
{
var navigate = document.getElementById('map1');
var findImg = navigate.getElementsByTagName('img');
findImg[0].src = allMouseOvers[this.number];
}All my problems lie within the "this.number" (the last line in above code)when i have 3 hotspots on my image map, when i should be 0 this.number= 2 when i is 1 this.number =1 and when i is 2 then this.number=0.
so i get in inverse effect when mousing over the hotspots such as mousing over the top brings up the image for the one that should come up when i am mousing over the bottom.
I dont know what is going on, and i tried to go about it a different way by passing a parameter
hotareas.onmouseover = mouseIsOver(>>>HERE<<<);
however that doesnt work and i also have no idea why.
the point is i could make it work, but i would have no idea why its working like it is:)
thanks a lot for any help!!
(here is the full code if any of the above didnt make full sense:)
html:
<body>
<div id="centerAll">
<div id= "map1">
<div class ="noborder"><img src='pics/ortho/mortho1.jpg' usemap=#airmap>
<map name=airmap>
<area shape=Rect coords=161,220,239,267 href=''>
<area shape=Rect coords=161,159,239,206 href=''>
<area shape=Rect coords=162,100,240,147 href=''>
</map>
</div>
</div>
</div>
</body>javascript:
var allMouseOvers = new Array();
//var allMouseIsClicked = new Array();
window.onload = function()
{
loadAll(document.getElementById('map1'));
}
function loadAll(arrayLoading)
{
var hotareas = arrayLoading.getElementsByTagName('area');
for(var i=0;i<hotareas.length;i++)
{
hotareas[i].onmouseover = mouseIsOver;//can i ever pass an attribute here????
hotareas[i].onmouseout = mouseIsOut;
hotareas[i].number = i;
allMouseOvers[i] = new Image();
allMouseOvers[i].number = i;
switch(i)
{
case 0: allMouseOvers[i]= './pics/ortho/mortho1.jpg';//would have allMouseOver[i].whatever if was changing more than 1 image)
break;
case 1: allMouseOvers[i] = './pics/ortho/mortho2.jpg';
break;
case 2:
allMouseOvers[i] = './pics/ortho/mortho3.jpg';
break;
default: alert('Oops! Make sure you have enough cases to match your number of areas!')
break;
}
}
}
function mouseIsOver()//how do i pass something here?
{
var navigate = document.getElementById('map1');
var findImg = navigate.getElementsByTagName('img'); //getting elements by tag name means ARRAY is gotten
//(and in this case there is only 1)
findImg[0].src = allMouseOvers[this.number];
}