image map rollover and background color swap

liunx

Guest
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='http://www.webdeveloper.com/forum/archive/index.php/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<!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=http://www.webdeveloper.com/forum/archive/index.php/"../Images/myMap.gif" usemap="#Map" alt="myMap" />
<map name="Map" id="Map">
<area alt="something" shape="rect" coords="1,20,5,40" href=http://www.webdeveloper.com/forum/archive/index.php/"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://www.webdeveloper.com/forum/archive/index.php/"http://something">My link to change class</a>
</p>
</body>
</html>
valid ID's (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/types.html#type-name">http://www.w3.org/TR/REC-html40/types.html#type-name</a><!-- m -->)Thanks so much, Fang. The whole concept I was trying to get to is at: <!-- m --><a class="postlink" href="http://www.wnchn.org/map2.asp">http://www.wnchn.org/map2.asp</a><!-- m -->

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
 
Back
Top