Rollover images problem

HTML & CSS
1

I have a button places within a div made to look like its part of a backgorund div, and when rolled over it expands as below.

It’s the coloured brandcheck button on the left -

http://www.cristalstandards.com/dev/brandCheck_Module.php

The problem I have is the area thats set for the images to show, the rollover area for the button is to large for the original state button, and as you get close to it the rollover starts to early.

Here is my code:


<div style="position:relative; z-index:10; float:left; width:260px; height:360px; left:140px; top:41px;">
  <a href="#" class="rollover" title="Webvamp"><span><img src="images/module_Carousel/BrandCheck_Button_Small.png" border="0" /></span></a>
</div>

CSS:


#module_Content_Left a.rollover {
display: block;
width: 94px;    
height: 137px;    
text-decoration: none;  
}
#module_Content_Left a.rollover:hover {    
background-position: 0 0; 
background:url(../images/module_Carousel/BrandCheck_Button_Large.png); 
width: 260px;    
height: 360px;  
}
#module_Content_Left .rollover:hover span
{
  position: absolute;
  top: -999em;
}
2

Hi,

If you are talking about the skewed shapes on the left (starting with room check) then you can only do square target areas with css and you can’t hug the image unless you use an image map or perhaps CSS3 transforms (skew etc).

Other than that all shapes in CSS2.1 are square at the moment although there are some things on the horizon in CSS3 which may do the job.

The items don’t look to bad to me and I only rollover when you are in the square occupied by the shape… You could make them up with multiple smaller elements but I don’t think its worth the effort.