Hey,

 

I'm designing a site for someone, and they want the kind of functionality where you have a series of images, and if you hover over on one the text underneath the images changes without having to reload the page. Now, I know this needs to be done with Javascript, but I know absolutely nothing about it.

Please, if you post a piece of JS code, tell me exactly what to change in order to adapt it to my site... as I said, I don't know anything about it.

Thanks for your help!

I'll leave to someone else to give the javascript solution, but you can do it with CSS hover popups. See item 1 here:-

http://www.wickham43.net/hoverpopups.php

 

There are three links on the left; the top one has an image popup but could be text. The second link is text with a text panel popup and the third is an image thumbnail with a text panel popup.

 

You should be able to set up a series of image thumbnails and set the text panel popup to appear in the same place for all of them (as has been done for the image popups in item 2, but use the code for item 1).

 

The popups have a default position in the stylesheet code relative to the thumbnail as shown in item 1 where each popup panel is level with the top of its thumbnail and a set distance to the right, but using a class for each popup you can adjust the offset so that each popup appears in the same place on the page instead of being offset by an equal amount from the thumbnail. This is described in item 2.

Thanks for that! I'll definitely be able to use that technique, though probably not in this instance... Is it possible to keep the text there, so that it doesn't disappear when the mouse goes away? Or is that only possible with Javascript?