[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 771
  • Last Modified:

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.
0
areric
Asked:
areric
1 Solution
 
GrandSchtroumpfCommented:
You should use a doctype and validate your code.
What firefox does is correct.  If you want your border to be around the image, then you need to specify the border on the image itself, not on the anchor.

Change this:

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

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


Or you need to float the anchor, or change it into a block-element using "display: block":

.image
{
  position: relative;
  z-index: 0;
  float: left;
}

or

.image
{
  position: relative;
  z-index: 0;
  display: block;
}
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now