[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