Log in

View Full Version : 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/dynamicindex4/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


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


<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>
farizvi
02-13-2009, 03:13 PM
@bluewalrus

i tried your code by changing img to area in the css but it didn't work
bluewalrus
02-15-2009, 05:08 PM
oo I think thats cause your using an image map are these images online anywhere so i could try and test some other ways to get it to work?
farizvi
02-16-2009, 08:29 AM
What should be done in case of image map then? No, these images are not online anywhere.
bluewalrus
02-16-2009, 08:56 PM
Could try and do this...
http://www.alistapart.com/articles/imagemap/