PDA

View Full Version : Multiple image swaps/rollovers

janetb
09-30-2004, 05:39 PM
Thought I understood, but head is sore from banging on the desk. Want to do two image swaps in two different areas. Top is large state image with image map hrefs which completely swaps out as m. Underneath is list of cities with a 'blank' image (arr) - also href. 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 from both href references (county or m), but not the flashing arrow (arr). Tried it without all of the arr array - didn't seem needed, but didn't work. I have used them separately and it worked, but I'm stumped. Any Help? Here it is:

<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";
etc...

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);
etc....}
// --></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">etc....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.
hemebond
09-30-2004, 10:47 PM
Please learn to use vB code (http://codingforums.com/misc.php?do=bbcode). Are you able to create a diagram or set of (small) images showing what you want to achieve?
glenngv
10-01-2004, 04:13 AM
And you can avoid the use of eval by using bracket notation. You've already used bracket notation in document.images, you can also use it in global variables by using the window object.

window["m" + n].src;

See my sig for more info of the bracket notation.
janetb
10-01-2004, 02:03 PM
Thank you both for the tips. I did change the code to brackets (nice article). But, it didn't change the results. No error, but only one image swap.

This url shows the blinking arrow if you mouseOver the city name:
http://www.wnchn.org/mapp.asp

This url shows the image map where I'm trying to combine the county swap and the arrow swap above:
http://www.wnchn.org/map2.asp

Sorry if my posting etiquette was incorrect.

jb
hemebond
10-05-2004, 12:28 AM
What browser are you using? Even in Internet Explorer I don't see any arrows.