Saturday, April 30, 2011

Swapping multiple images on mouseover

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>

Thursday, April 28, 2011