Highlight Area on MouseOver

**farizvi** · 02-13-2009, 12:31 PM

hi!

I'm trying to implement the technique mentioned at
http://www.dynamicdrive.com/dynamici...highlight2.htm
to area tag but it isn't working at all. I've checked the border colors and they are being set alright but for some strange reason the border doesn't show up around the area tag.

any help would be appreciated. i want it urgently.

**Schmoopy** · 02-13-2009, 12:44 PM

Can you give a link or paste your code so we can see where you might be going wrong?

**bluewalrus** · 02-13-2009, 02:04 PM

you dont need all that code just too make a border around an image

Code:

a.borderme img{
border:none;
}
a.borderme:hover img {
border:#ff0000 solid 1px;
}
<a class="borderme" href="#"><img src="blue.png" /></a>

**farizvi** · 02-13-2009, 03:07 PM

here's my code

Code:

<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
//--></script>
<style>
.borderimage{
border:5px solid blue;
}
area:hover {border:5px solid blue;}
</style>
<script language="JavaScript" type="text/javascript">

function borderit(which,color){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//alert(which.style.borderColor)
which.style.borderColor=color
//document.getElementById("area01").style.borderColor=color
}
}

</script>
</head>
<body bgcolor="#ffffff">
<img name="Page2" src="Page2.jpg" width="950" height="1425" border="0" id="Page2" usemap="#m_Page2" alt="" /><map name="m_Page2" id="m_Page2">
<area shape="rect" coords="34,177,248,321" href="news/p2-n14.jpg" target="_blank" alt="" />
<area shape="rect" coords="33,48,247,172" href="news/p2-n13.jpg" target="_blank" alt="" />
<area shape="rect" coords="31,322,248,472" href="news/p2-n15.jpg" target="_blank" alt="" />
<area shape="rect" coords="34,478,246,587" href="news/p2-n16.jpg" target="_blank" alt="" />
<area shape="rect" coords="30,593,248,714" href="news/p2-n17.jpg" target="_blank" alt="" />
<area shape="rect" coords="254,528,472,717" href="news/p2-n12.jpg" target="_blank" alt="" />
<area shape="rect" coords="257,400,471,524" href="news/p2-n11.jpg" target="_blank" alt="" />
<area shape="rect" coords="256,234,474,396" href="news/p2-n10.jpg" target="_blank" alt="" />
<area shape="rect" coords="254,80,472,230" href="news/p2-n9.jpg" target="_blank" alt="" />
<area shape="rect" coords="480,78,694,252" href="news/p2-n5.jpg" target="_blank" alt="" />
<area shape="rect" coords="480,259,697,367" href="news/p2-n6.jpg" target="_blank" alt="" />
<area shape="rect" coords="481,369,696,577" href="news/p2-n7.jpg" target="_blank" alt="" />
<area shape="rect" coords="480,583,692,716" href="news/p2-n8.jpg" target="_blank" alt="" />
<area shape="rect" coords="703,483,923,716" href="news/p2-n4.jpg" target="_parent" alt="" />
<area shape="rect" coords="704,366,919,480" href="news/p2-n3.jpg" target="_blank" alt="" />
<area shape="rect" coords="701,206,916,361" href="news/p2-n2.jpg" target="_blank" alt="" />
<area id="area01" shape="rect" coords="700,48,920,198" href="news/p2-n1.jpg" target="_blank" alt=""
 class="borderimage" onmouseover="borderit(this,'red');" onmouseout="borderit(this,'white');" />
</map>
</body>