Multiple image swap on rollover
Think this is possible, but head is sore from banging on the desk. Want to do two swaps in two different areas. Top is large state image with image map hrefs. Underneath is list of cities with a 'blank' image. When the mouse is over the city name, I want the 'blank' image to switch to arrow and the large state map to switch highlighting county. I've got top part to work, but not the flashing arrow. Tried it without all of the arr array - didn't seem needed, but didn't work. Any Help? Here it is:
In header:
function swapover(n) // swaps the images on each mouseover
{
document.images['m'].src = eval("m" + n + ".src");
document.images['arr'+n ].src= eval("arr1.src");
}
function swapout(n) // swaps the images back on each mouseout
{
document.images['m'].src = eval("m0.src");
document.images['arr'+n ].src = eval("arr0.src");
}
// --></script>
</head>
<body topmargin="5" leftmargin="5"><center>
<script language="Javascript">
<!--
if (document.images)
{
arr0 = new Image(9,9);
arr0 = "images/pixel2.gif";
arr1 = new Image(9,9);
arr1 = "images/arrow13t.gif";
arr2 = new Image(9,9);
arr2 = "images/arrow13t.gif";
arr4 = new Image(9,9);
arr4 = "images/arrow13t.gif";
arr5 = new Image(9,9);
arr5 = "images/arrow13t.gif";
arr7 = new Image(9,9);
arr7 = "images/arrow13t.gif";
arr9 = new Image(9,9);
arr9 = "images/arrow13t.gif";
arr10 = new Image(9,9);
arr10 = "images/arrow13t.gif";
arr12 = new Image(9,9);
arr12 = "images/arrow13t.gif";
arr13 = new Image(9,9);
arr13 = "images/arrow13t.gif";
arr14 = new Image(9,9);
arr14 = "images/arrow13t.gif";
arr15 = new Image(9,9);
arr15 = "images/arrow13t.gif";
arr16 = new Image(9,9);
arr16 = "images/arrow13t.gif";
m0 = new Image(475,288);
m0.src = "images/m0.gif";
m1 = new Image(475,288);
m1.src = "images/m1.gif";
m2 = new Image(475,288);
m2.src = "images/m2.gif";
m4 = new Image(475,288);
m4.src = "images/m4.gif";
m5 = new Image(475,288);
m5.src = "images/m5.gif";
m7 = new Image(475,288);
m7.src = "images/m7.gif";
m9 = new Image(475,288);
m9.src = "images/m1.gif";
m10 = new Image(475,288);
m10.src = "images/m10.gif";
m12 = new Image(475,288);
m12.src = "images/m12.gif";
m13 = new Image(475,288);
m13.src = "images/m13.gif";
m14 = new Image(475,288);
m14.src = "images/m14.gif";
m15 = new Image(475,288);
m15.src = "images/m15.gif";
m16 = new Image(476, 284);
m16.src = "images/m16.gif";
}
// --></script>
<img border="0" src="images/m0.gif" name="m" usemap="#FPMap0" width="475" height="288">
<map name="FPMap0">
<area onmouseover="swapover(2)" onmouseout="swapout(2)" href="http://www.something.org/" shape="polygon" coords="260, 111, 344, 81, 372, 151, 284, 167">
<area onmouseover="swapover(9)" onmouseout="swapout(9)" href="http://www.something.org/" shape="polygon" coords="21, 213, 20, 265, 78, 263, 99, 226, 120, 223, 125, 207, 76, 213, 63, 198">
<area onmouseover="swapover(5)" onmouseout="swapout(5)" href="http://www.something.org/" shape="polygon" coords="244, 85, 284, 166, 254, 192, 211, 148, 191, 107">
<area onmouseover="swapover(10)" onmouseout="swapout(10)" href="http://www.something.org/" shape="polygon" coords="285, 169, 316, 223, 353, 213, 363, 154">
<area onmouseover="swapover(4)" onmouseout="swapout(4)" href="http://www.something.org/" shape="polygon" coords="210, 147, 184, 158, 184, 189, 225, 251, 244, 253, 253, 193">
<area onmouseover="swapover(1)" onmouseout="swapout(1)" href="http://www.something.org/" shape="polygon" coords="229, 257, 183, 188, 131, 199, 123, 224, 136, 224, 163, 258">
<area onmouseover="swapover(7)" onmouseout="swapout(7)" href="http://www.something.org/" shape="polygon" coords="357, 105, 414, 49, 443, 128, 370, 143, 357, 101, 364, 98">
<area onmouseover="swapover(14)" onmouseout="swapout(14)" href="http://www.something.org/" shape="polygon" coords="334, 21, 387, 75, 415, 50, 391, 4">
<area onmouseover="swapover(13)" onmouseout="swapout(13)" href="http://www.something.org/" shape="polygon" coords="364, 168, 355, 210, 416, 211, 415, 191, 385, 162">
<area onmouseover="swapover(12)" onmouseout="swapout(12)" href="http://www.something.org/" shape="polygon" coords="373, 146, 364, 165, 387, 159, 419, 192, 419, 210, 459, 211, 454, 124">
<area onmouseover="swapover(15)" onmouseout="swapout(15)" href="http://www.something.org/" href="http://www.wncguide.com/swai_co/Welcome.html" shape="polygon" coords="191, 110, 209, 144, 181, 156, 184, 186, 133, 197, 153, 171, 67, 161">
<area onmouseover="swapover(16)" onmouseout="swapout(16)" href="http://www.something.org/" shape="polygon" coords="284, 168, 315, 222, 247, 253, 256, 191"></map>
<a onmouseover='swapover(1)' onmouseout='swapout(1)' class='home3' href='http://www.something.org'>
<img src='../images/pixel2.gif' border='0' width='9' height='9' name='arr1'>Some city one</a><br>
<a onmouseover='swapover(15)' onmouseout='swapout(15)' class='home3' href='http://www.something.org'>
<img src='../images/pixel2.gif' border='0' width='9' height='9' name='arr15'>Some city two</a><br>
etc.
Re: Multiple image swap on rollover
Looking at this the first thing i'd try is to swap the eval statements like below
In header:
function swapover(n) // swaps the images on each mouseover
{
document.images['m'].src = eval("m" + n + ".src");
document.images[eval('arr'+n) ].src= arr1.src;
}
function swapout(n) // swaps the images back on each mouseout
{
document.images['m'].src = eval("m0.src");
document.images[eval('arr'+n) ].src = arr0.src
}
Not sure if this is the answer but worth a try perhaps.
__________________
Remote Control Cars at RC-Playtime.co.uk
