Hi there,

I've found an example layout of what I'm trying to achieve on a page.

the link is here just the html and css loaded with no images...

Basically, the small thumbs on the right need to change the larger image on the left when clicked and also the description underneath.

can this be done with only CSS or am I gonna have to stick some javascript in there as well?

Well, part of it can be done with CSS, check out pure CSS Popups:
http://meyerweb.com/eric/css/edge/popups/demo2.html

To achieve everything you want, you're likely going to need a bit of JS

Thanks LadynRed - Can anyone point me to an appropiate javascript tuorial?

Hi Darren

I think this http://www.webmasterworld.com/forum10/3606.htm should help.
extract from the thread

forgot to say that the first script changes an img from a secondary location
it requires 2 img to show for ex : a and b, clicking a change b

Not sure if its what your looking for but it may help.

It's called a "disjointed rollover" if you want to have a search for one.

and there is code in ->
http://www.candsdesign.co.uk/page-te...ery/layout.asp

Thanks Chris, this is exactly what I've been looking for1

Chris, can you help with modifying the code please...?

I've changed the onmouseover to onclick and removed onmouseout hide image because I want the user to click on the thumb and the text stays until they click another one.

How do I stop it opening up the new page straight away?

I want to have a link at the bottom of the text paragraph to jump them to the relevant link.

(Hope that makes sense!)

not a problem.

Going away from my desk for a couple of hours shortly but I'll knock something together and post when I get back.

Keep meaning to code an AJAX version of it as well

Thanks matey - appreciate it!

replace the href url with "#" in all the links and add this code into the ShowImage(picCode) function

var l_oImgLink = document.createElement("a");
	l_oImgLink.setAttribute("href",picArray[picCode]);
	l_oImgLink.setAttribute("title",txtArray[picCode]);
	l_oImgLink.innerHTML = "Show full size image";
document.getElementById('img_text').appendChild(l_oImgLink);

BTW bit later than planned the other half decided to go shopping seeing as "we are already in town"!!

just to add the code as above will show the preview sized image

and the working version is at
http://www.candsdesign.co.uk/page-te...ry/layout2.asp

Brilliant, Brilliant, Brilliant!

Hope she bought you something nice Chris!