rollover image dimensions

[toolmania1]

Where does a rollover end? Does it end on the original image dimensions or for the rollover image if they differ? Can you set the dimensions in which the rollover responds?

 

[PixelPusher]

The hover state of an anchor is by default defined by its contents, however it is possible to override the default by specifying a desired width and height. If you do this to a text link, you will need to change the display to "block".

 

[toolmania1]

That is good to know. I have set up a rollover without any javascript. It is not very accurate as to where the rollover starts and ends. I would like to put more than one on a page. It seems like there will be an issue once I start doing this. Maybe they will override each other?

 

[PixelPusher]

I am not sure I follow you about the overriding issue? You can have an image display outside the scope of the rollover area, it will just obviously disappear on mouse out.

 

[PixelPusher]

you could do something like this: (large image is only present during hover)

<div id="ext">
   <a href="">External Rollover Image <img src="lgImage.png" alt="The large image"/></a>
</div>

div#ext a:link img, div#ext a:visited img {
   position:absolute;
   width:500px;
   height:492px;
   top:-500px;
   left:350px;
   border:none;
}
div#ext a:hover img, div#ext a:focus img {
   top:200px;
}
div#ext a:link, div#ext a:visited {
   display:block;
   width:150px;
   height:148px;
   text-indent:-5000px;
   background:url(smallThumbnail.png);
}
div#ext a:hover, div#ext a:focus {
   outline:0;
}