onRollover Image swap

[devilman]

Hi all,

I'm on building a site for a client and I am after a way to change a large image on Rollover of a small product.

What I've got on my section is a large picture that is added into the page via a CUSTOMVAR, I then added the main products which are smaller images. What I'm after is a way of changing the larger image when the user rolls over the smaller images. But I need it to be client friendly so that they can update and change the images when/if needed. Is there a way of actually doing something like this through Actinic?

Thanx

[Kermy]

So you're looking to show a large version of the product image in the large area when they mouseover the standard image?

If this is the case, create another CUSTOMVAR - call it 'LARGEIMAGE'. Then for each product, go to Custom Properties and give your CUSTOMVAR:LARGEIMAGE the filename of the product's larger image.

Now, add an ID to the <img> tag of your large image, something lile

<img src="CUSTOMVAR:MAINIMAGE" id="largeimage" />

Then, in your image template, change the tag of the smaller image to something like this:

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
	  ALT="NETQUOTEVAR:ALTERNATETEXT"
	  BORDER=0
	  NETQUOTEVAR:IMAGEHEIGHT
	  NETQUOTEVAR:IMAGEWIDTH
          onmouseover="document.getElementById('largeimage').src='CUSTOMVAR:LARGEIMAGE';"
          onmouseout="document.getElementById('largeimage').src='CUSTOMVAR:MAINIMAGE';"
	  NETQUOTEVAR:OTHERIMAGEMARKUP>

Obviously you need to change CUSTOMVAR:MAINIMAGE to the CUSTOMVAR value you have already created. Now your client can add the large image filename whenever they create new products.

[devilman]

Cheers, that works a treat! Many thanx

[NormanRouxel]

Grahams suggestion is excellent. However you'll get JavaScript errors unless you implement this on allproducts. The following amendment will fix this.

          onmouseover="var x='CUSTOMVAR:LARGEIMAGE';if(x)document.getElementById('largeimage').src=x;"
          onmouseout="var x='CUSTOMVAR:MAINIMAGE';if(x)document.getElementById('largeimage').src=x;"

[Kermy]

Yeah, my solution would have caused problems if a large product image wasn't specified. Oops! Cheers Norman

[devilman]

Ok, thanx for that, I will add that into the script. Thanx again guys

[NormanRouxel]

Let us know when you've got a live page with this on it. It'll be nice to see it in use.

[devilman]

I have added the script to the template, I've made some little changes as the image was to stay on when rollout, anyway it works great thanx to you guys.

http://www.sofabeds4u.com/acatalog/Cushions.html

[jont]

Looks very good