Indexhibit Support

Hi guys, I'm very noob to all this. VERY noob, so there. I've got a nice site in the making - http://largeretouching.com/
and would really like to make it so that instead of clicking 'next', a visitor merely has to move the cursor over an image to see the original.

This site is excactly what I mean:
http://www.briandilg.com/imaging/
(also, I love having thumbnails on the side like that, is that possible?)

Can anyone tell me what to do next?! I read the 'make a plugin' tutorial, but hit the wall when it came to actually making one - txt file? pulling hair out! As I say I'm very new to the technical side, so any help would be so appreciated, thankyou!
Fred

Hiya Fred.

Very nice skills you have with images. My illusions of the fashion industry have been shattered :-)

I assume what you want only applies to a set of two "before and after" images, yes?

If so, you could do it via css. You would have to insert the "before-image" element manually, wrap it in a div container with a class, give that div the "after image" as a background image, then set the "before image" to display:none on hover. Something like this:

1. .imgdivclass {
2. width: value;
3. height: value;
4. background-image: url(someurl);
5. padding: 0;
6. }

.imgdivclass img:hover {
display: none;
}

/*and perhaps include*/

.imgdivclass img {
margin: 0;

}

Just to give you an idea of a possible way to go. However it may be the background-image could load first, in which case the surprise could be spoiled. To avoid this a javascript/jQuery route could be the answer, as I can see your referenced site has chosen a basic Javascript swap image solution.

Regards,

Jesper.

thanks for your help - as I say I'm very lost when it comes to code - could you tell me where I actually put this code? I mean literally so a monkey could understand, thanks!