[BNM] [BNM CSS 'Pixy Rollover' combined with AlphaImageLoader - possible?

Mark Croxton mcroxton at hallmark-design.co.uk
Wed Nov 28 14:32:26 GMT 2007


Not sure what the Pixy rollover method is, but I know it's possible  
to do this - you have to absolutely position an extra tag with the  
transparent background image inside the anchor, and then move its  
position on :hover. The background image would combine the rollover  
states next to each other. Sort of like this:

<a id="rollover" href="#"><em></em>This text gets hidden<a>

#rollover {
	display: block;
	position: relative;
	width: 250px;
	height: 250px;
	overflow: hidden;
         text-indent: -9999em;
}
#rollover em {
	display: block;
	position: absolute;
	width: 500px;
	height: 250px;
	left: 0;
	top:0;
	background: transparent url('my-image.png') 0 0 no-repeat;
}

#rollover:focus em, #rollover:hover em {
	left: -250px;
}

/* ie 6*/
* html #rollover em {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='myimage.png',sizingMethod='scale');
}

Mark


More information about the BNMlist mailing list. Powered by Wessex Networks