Hi,

 

How would I make image 'A' change to image 'B' by hovering over image 'B' if that makes sense. Image A is the main product image, and image B is a different image of the product, which is underneath image a.

 

I think this can be done quite simply in CSS? Just dont know what its called!

 

Also, can anyone recommend a good way to display images when you click enlarge image.

 

Thanks

 

Chris

lightbox is good way to show enlarged images, have a look at:

lightbox

 

CSS will make images change on hover if they are a link, (the click to enlarge is fine).

 

If there are lots of products etc that you want to change you'll be better off using java.

I think stevo's a little off as that will give you a whole different outcome.

 

For what you want to do, it's quite easy.

 

<a href="#" class="images"><img src="a.jpg" class="a"><img src="b.jpg" class="b"></a>

 

a.images:link img.a, a.images:visited img.a { display: block; }
a.images:link img.b, a.images:visited img.b { display: none; }

a.images:hover img.a { display: none; }
a.images:hover img.b { display: block; }

 

And if you want really compact code;

 

a.images:link img.a, a.images:visited img.a, a.images:hover img.b { display: block; }
a.images:link img.b, a.images:visited img.b, a.images:hover img.a { display: none; }

 

Little bit more confusing, but I hope you get the gist. All classes can be changed, and if you don't want this in an <a> tag, you could put it in an <ul><li><img><img><li></ul> and replace the 'a' references with 'li'. You can then remove the :link and :visited parts.

 

Unfortunately with this, ie6 won't allow :hover on anything other than an <a>, so you'll have to include a little bit of javascript.

Hi,

 

Thanks for the link to lightbox!

 

If I have two images in a group, is the next image always meant to stay on? As it only appears when I hover over something. Example: http://www.regalautobulbs.co.uk/products/philips/xtreme/h4.php

 

Thanks

 

Chris