Results 1 to 8 of 8

Thread: Highlight Area on MouseOver

  1. #1
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Highlight Area on MouseOver

    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.

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

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

  3. #3
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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>

  4. #4
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #5
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    @bluewalrus

    i tried your code by changing img to area in the css but it didn't work

  6. #6
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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?

  7. #7
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What should be done in case of image map then? No, these images are not online anywhere.

  8. #8
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •