Easy Product Rotations using 1 line of code


Easiest method to do product rotation is a simple on mouse over rolling over of an image. Images should be downloaded first so five icons are being created with the image and the rollover changes the main image. The icon images could be replaced by what appears to be a scroll bar and would emulate the action of a scroll bar – that would require the an additional line of code to change the scroll image(s) as well (the downloaded icons would be styled as transparent over the scroll image background).

I have also posted about a Jquery plugin to do product rotations. The addition of code is only about changing the User Interface. If you like it as it is – which is simple and nobody is confused about the UI – it is good to go.

<div>
<img src=”3.jpg” id=”rot5″ width=”200″ height=”200″/>
<br />
<img src=”1.jpg” width=”40″ height=”40″ onMouseOver=”document.getElementById(‘rot5’).src=’1.jpg'” />
<img src=”2.jpg” width=”40″ height=”40″ onMouseOver=”document.getElementById(‘rot5’).src=’2.jpg'” />
<img src=”3.jpg” width=”40″ height=”40″ onMouseOver=”document.getElementById(‘rot5’).src=’3.jpg'” />
<img src=”4.jpg” width=”40″ height=”40″ onMouseOver=”document.getElementById(‘rot5’).src=’4.jpg'” />
<img src=”5.jpg” width=”40″ height=”40″ onMouseOver=”document.getElementById(‘rot5’).src=’5.jpg'” />

</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: