PDA

Click to See Complete Forum and Search --> : image map rollover and background color swap

janetb
10-01-2004, 10:27 AM
Is there a combination of javascript/css that take the value given in an image map onmouseover/onmouseout and go to an href list and change the href class? (Basically, I want to change the background color as a highlighted selection, but the list below the image map also needs to be clickable.)

i.e.

<img src='images/mapP2.gif' border='0' usemap='#Map'>
<map name='Map'
<area shape='rect' coords="1,20,5,40" href='http://something' onMouseOver="9.className='home'" onMouseOut="9.className='home3'">
</map>

When the above occurs, the following is changed?

<div id='9'><a class='home3' href='http://something'>My link to change class</a></div>

Thanks,
JB
Fang
10-01-2004, 02:02 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
img {border:0;}
.home {color:blue; background:red;}
.home3 {color:red; background:blue;}
-->
</style>
</head>
<body>
<p>
<img src="../Images/myMap.gif" usemap="#Map" alt="myMap" />
<map name="Map" id="Map">
<area alt="something" shape="rect" coords="1,20,5,40" href="http://something" onmouseover="document.getElementById('link9').className='home';" onmouseout="document.getElementById('link9').className='home3';">
</map>
</p>
<p>When the above occurs, the following is changed?</p>
<p>
<a id="link9" class="home3" href="http://something">My link to change class</a>
</p>
</body>
</html>
valid ID's (http://www.w3.org/TR/REC-html40/types.html#type-name)
janetb
10-04-2004, 02:44 PM
Thanks so much, Fang. The whole concept I was trying to get to is at: http://www.wnchn.org/map2.asp

It works, but seems clunky. I'm going to try to researc passing more than one item for those counties with more than one listing. Right now, I've just put the mouseover/mouseout in twice. But, I know there's gotta be a better way.

Thanks again.
Janet