Show/Hide Images

[Kavin]

This website before has a feature to show and hide product images with the click of a link. I was wondering how to do this?

www.electronics-online.co.uk

For a direct link to a page with the show/hide function click here

Thanks in advance for any help you are able to provide.

Kavin

[Kermy]

The site uses the URL to pass preferences about the state of the images. I would go about this a different way, so that the page wasn't reloaded when the user toggled the two states.

I would go about it this way - create two CSS styles for the images: one for when the images are shown, and one which uses the CSS 'display:none' to hide the images. Then a javascript function would be used to toggle the classes of the images when the user clicked a button or link.

With this solution you would get the same effect without having to reload the page.

So, your two CSS classes would be:

.showImg {display:inline}
.hideImg {display:none}

the .showImg class should be applied to the images in the Act_ProductImage.html template.

The javascript function would be placed within the <script>...</script> tags in Act_Primary.html:

function toggleImg(){
var imgs=document.getElementsByTagName('img');
for (i=0;i<imgs.length;i++){
	if (imgs[i].className=="showImg"){
		imgs[i].className="hideImg";
		}
	else if (imgs[i].className=="hideImg"){
		imgs[i].className="showImg";
		}
	}
}

Finally, set the function to run by attaching it to a button or image with something like:

<input type="button" value="Show/Hide Images" onclick="toggleImg()" />

[Kavin]

Thank you for your reply, i will try this.