asked on

Rollover Border on IMG

Hey all,

Im trying to do a couple things in my script.

1) On rollover of an image link i want it to add a border to the image to highlight the image
2) On rollover i want a hidden div to display that contains an description of the image.

So far this is what i have.

<html>
      <head>
            <title>Roll Over + Pop Up Sample</title>
            <script>
                  function DisplayImageDescription(imageId)
                  {
                   var ddId = "image" + imageId + "description";
                   alert("display" + ddId);
                   var descriptionDD = document.getElementById(ddId);
                   descriptionDD.style.display = "block";
                  }

                  function HideImageDescription(imageId)
                  {
                   var ddId = "image" + imageId + "description";
                   alert("hide" + ddId);
                   var descriptionDD = document.getElementById(ddId);
                   descriptionDD.style.display = "none";
                  }
            </script>

            <style>
                  .image
                  {
                        position: relative;
                        z-index: 0;
                  }

                  .image:hover
                  {
                   background-color: transparent;
                   z-index:50;
                   border: solid 2px green;
                  }

                  .image span.imageDescription
                  {
                   position: absolute;
                   padding: 5px;
                   left: -1000px;
                   display:none;
                   color: black;
                   text-decoration: none;
                  }

                  .image:hover span.imageDescription
                  {
                   display: block;
                  }

                  .image:hover #image1description
                  {
                   left: 350px;
                   top: 50px;
                  }

            </style>
      </head>
      <body>
            <div id='content'>
                  <a id='image1a' href='#' class='image'>
                        <img src='image.jpg' />
                        <span class='imageDescription' id='image1description'>This is the image Description</span>
                  </a>
            </div>
      </body>
</html>

The problem is in IE the image doesnt fill the entire Anchor and in firefox the image doesnt fill ANY of the anchor. It looks like an empty anchor behing the image, like the image has been removed from the anchor entirly.

You can view an example here: http://www.flyerwebdesign.com/patrioticsi/SamplePages/rollover.htm

Does anyone know why this isnt displaying right?

p.s. im a bit green to css so this might just be a stupid mistake.

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial