PDA

View Full Version : Problems with imagemap when used as rollover button



CathyM
Feb 17th, 2006, 08:31 PM
Hello All,

I've created an imagemap of a map of my island, and separated the areas using the code <area shape="poly"..... That works fine, when I put the mouse over each area, I get the word I put into the alt=' '. However, I want when I roll over each area to also update a specific area with a short description of the area. This section doesn't work. Each short description is in a gif file which I put into an array, and then use a function for the mouseover and mouseoff. Not sure if the array or function has a problem or the area that I am trying to put the description into. I am listing most of the code to see if anyone can assist in that regard.

Thanks in advance.

CathyM

code..
<script type="text/javascript">
<!--
var imagesSrc = new Array("castries.gif","grosislet.gif","dennery.gif", "soufriere.gif",
"anselaraye.gif", "vieuxfort.gif","choiseul.gif","micoud.gif", "canaries.gif",
"laborie.gif", "dauphin.gif", "praslin.gif");


var countryImages = New Array();

for (i=0; i<imagesSrc.length;i++){
countryImages[i]=new Image();
countryImages[i].src=imagesSrc[i];
}

function rollon(locid){
document["areanotes"].src=eval("countryImages[" + locid + "].src");
}
function rollof(){
document["areanotes"].src="notes.gif");
}

</script>

<map id="stluciamap">

<area shape="poly" href="#" alt="Castries" coords="182,95,226,116,199,219,119,181"
onMouseOut="rolloff()" onMouseOver="rollon(0)" />
<area shape="poly" href="#" alt="Gros Islet" coords="192,33,187,89,221,115,252,63,247,21"
onMouseOut="rolloff()" onMouseOver="rollon(1)" />
.
.
.
.
</map>
<img src="notes.gif" name="areanotes" align="right" id="areanotes" width="350" height="70"
alt="short notes on area" /><br />
<br /><br /><br />

<img src="map2.jpg" name="map" align="right" width="350" height="473" alt="map of St. Lucia"
usemap="#stluciamap"/><br />

vwphillips
Feb 17th, 2006, 09:49 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script type="text/javascript">
<!--
var imagesSrc = new Array("Two.gif","Three.gif");


var countryImages = new Array();

for (i=0; i<imagesSrc.length;i++){
countryImages[i]=new Image();
countryImages[i].src='http://www.vicsjavascripts.org.uk/StdImages/'+imagesSrc[i];
}

function rollon(locid){
document.getElementById('areanotes').src=countryImages[locid].src;
}

function rolloff(){
document.getElementById('areanotes').src="http://www.vicsjavascripts.org.uk/StdImages/One.gif";
}

</script>

<map id="stluciamap">

<area shape="poly" href="#" alt="Castries" coords="182,95,226,116,199,219,119,181"
onMouseOut="rolloff()" onMouseOver="rollon(0)" />
<area shape="poly" href="#" alt="Gros Islet" coords="192,33,187,89,221,115,252,63,247,21"
onMouseOut="rolloff()" onMouseOver="rollon(1)" />
</map>
<img src="notes.gif" id="areanotes" align="right" id="areanotes" width="350" height="70"
alt="short notes on area" /><br />
<br /><br /><br />

<img src="map2.jpg" name="map" align="right" width="350" height="473" alt="map of St. Lucia"
usemap="#stluciamap"/><br />
</body>

</html>

CathyM
Feb 18th, 2006, 04:07 PM
Hi,

I tried the code, either typing or copy and paste, but it doesn't seem to work for me. With it as is, it gives a blank page, putting the javascript code into the head rather than the body of the document, will allow me to see the two images, but still the first one -'areanotes' doesn't change with a rollover of the areas. I still see at the bottom taskbar, error on page.

CathyM