File reference for image swap

[kurt.santo]

Having the following funtion:

function show_big(src) {document.getElementById('big_image').src = src;}

and applying it to my html via

<img src="Furniture/ShanghaiTh.jpg" width="100" height="68" onclick="show_big('furniture/Shanghai.jpg')" class="thumb"><img src="Furniture/Shanghai-Th-2.jpg" width="100" height="68" onclick="show_big('furniture/Shanghai-2.jpg')" class="thumb" /><img src="Furniture/Shanghai-Th-3.jpg" width="100" height="68" onclick="show_big('furniture/Shanghai-3.jpg')" />

Is there a way to have

onclick="show_big('furniture/Shanghai-3.jpg')"

reference whatever there is in the img src but replace a bit of the name? I am working on this product template, which obviously will have in each situation different images in it. I thought I might have a naming scheme as ProductName-Th-1, ProductName-Th-2, ProductName-Th-3 for the thumbs, ProductName-1, ProductName-2, ProductName-3 for the main images and ProductName-Big-1, ProductName-Big-2, ProductName-Big-3 for the enlarged versions (I also plan for a pop-up with an enlarged version). I am open for different naming schemes if my suggestion is not a good idea. Also, if you know a good way to get the reference for the appropriate files let me know...Kurt

[jesh]

I don't know if this is the best way to do that, but you could head in this direction:

<img src="ProducttName-Th-1.jpg" onclick="showbig(this);" /><img src="ProducttName-Th-2.jpg" onclick="showbig(this);" /><img src="ProducttName-Th-3.jpg" onclick="showbig(this);" />

<script>function showbig(element){	var src = element.src;	src = src.replace("Th-","");	//document.getElementById('big_image').src = src;	// for debugging:	alert(src);}</script>

[kurt.santo]

What is the difference between show_big(src) and show_big(element)? Kurt

[jesh]

What is the difference between show_big(src) and show_big(element)? Kurt

Less typing. :)Rather than having to type, show_big('ProducttName-Th-1.jpg'), you could just type show_big(this) and get at the src by using this.src. That way, you don't have to change the javascript/html if you change the src of the image.

[kurt.santo]

Less typing. :)Rather than having to type, show_big('ProducttName-Th-1.jpg'), you could just type show_big(this) and get at the src by using this.src. That way, you don't have to change the javascript/html if you change the src of the image.

Oh, thats the one... Cheers, mate:-) Still biting my teeth out with that JavaScript image swap... When I search Google it seems no one has done such a thing, what is a bit weird as all the big sites, which sell hundreds of products seem to do it (I am guessing, could not imagine they are giving a reference to each product photo they have). Is this maybe a thing for PHP? Found one site where someone has done sth with PHP in that direction...Kurt