how to have 2 rollover images, one under and one on top of the image-link

[subwayslim]

Hi,

I'm struggling to find a solution to this problem. basically I'd like to have an image to appear behind my button-image and one to overlap it. Please see image gallery here:
http://www.subwayslims.co.uk/video5.html

what I'd like to obtain finanally is a button/image which looks something like the image showed in the second row (the image with the greay background and the red play button overlapping the image)

is there a way around it? i tried to create a DIV container with a different z-index but it's not doing a trick,

HELP!!


thanks
:eek:

[Centauri]

Use an empty span within the <a>, eg:<a href=""><img border="0" src="http://www.subwayslims.co.uk/metro_imgs/videobox/img2.jpg" /><span></span></a>and size it and position it absolutely over the top (you will need relative position on the <a>s to provide the position reference), and swap the button image onto its background. A word of warning about IE6 here though, the png image with the png fix css will render the link unclickable - best to feed IE6 a gif image instead of the png (won't look quite as good, but can be acceptable if you are careful making the gif, and at least the link will work in IE6).

[subwayslim]

Thanks! but how does it work? i mean, I only need the red play button to appear on rollover (it should appear at the same time when the grey background is showed), if i use the <span> the red play icon wouldn't be overlapping the image all the time?

[Centauri]

Only apply the background image to the span on hover of the <a>.video_img_holder a:hover span {
background: url(http://www.subwayslims.co.uk/metro_imgs/videobox/rollover_img_button.png);
}

[subwayslim]

Thanks a lot man! you're a star. it's working

cheers

[subwayslim]

It would be a way to fix the PNG transparency in IE6 for this (the play button on rollover?
http://www.subwayslims.co.uk/video5.html
cheers!

[Centauri]

Using the alphaimageloader filter will display the png transparency, and although it quite often makes the link unclickable, it seems to be ok in this case. Using the star-html hack to target IE6, the following removes the background and applies the image via the filter :* html .video_img_holder a:hover span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale, src="http://www.subwayslims.co.uk/metro_imgs/videobox/rollover_img_button.png");
cursor: pointer;
}The cursor style is required to still show the hand pointer when hovering the span - you probably would have noticed that that is an issue with IE6 anyway.

Note that the above uses proprietory code, and therefore will not validate. If it is important to you that your css file validates, then this rule could be applied via a conditional comment targeting <IE7 in the html head.

[subwayslim]

wicked! it's working...!

just one question why did you use:
* html
before:
.video_img_holder A:hover span

??

cheers mate

[Centauri]

That is the "star html" hack. The rule basically reads as "an element with the class of 'video_img_holder' that is contained within the html element which is contained within any other element". IE6 and below are the only browsers on earth that think that the html element is enclosed in something else, so they are the only ones that will respond to the rule - all other browsers will ignore it as being invalid.

[subwayslim]

thanks a lot dude, very helpful!

cheers