How to load an image/code on click/hover using CSS

[PublicSphere]

Hello everyone,

I've got a web page with lots of thumbnail images on it. I want to make it so that when you hover over or click on the thumbnails an enlarged version of the image appears eleswhere on the page -- not replacing the thumbnail but in addition.

I used to use javascript to do this by referencing the image ID's and using a Behavior.

Does anyone know of a good method for achieving this using CSS?

Thanks everyone.

[swa66]

You can use CSS to hide the large images (positioned where you like them)
You can add CSS rules with :hover on the small image to redisplay the large ones

<a href="#"> 
 <img src="small.gif" /> 
 <span> 
 <img src="large.gif" /> 
 <p>caption</p> 
 </span> 
</a>

CSS:

a span {display:none}
a:hover span {display:block; position:...}

The <a> tag is needed for IE, it doesn't do :hover on anything but <a> tags

You should find plenty of samples fully worked out on the web.

The drawback is that all large images will be loaded by the browser even if the user hover over none of them.

[PublicSphere]

Do you know if there is a way of doing this without having both images inside the same <a> tags?

[Setek]

Only with javascript, if you want it to work in IE 6. There is a way to do it in plain CSS using adjacent selectors but IE 6 doesn't support it, though I'm fairly sure most of the other standards compliant browsers do.

[edited by: Setek at 8:27 am (utc) on April 1, 2008]

[PublicSphere]

Yeah I can't get this working in IE6. I'm gonna have to use the javascript.