Basic eBay Design Series 2013 Part 6 – Image Switching with Javascript

I REALLY wanted to do a pure CSS gallery, but it was getting far to complicated. So I opted for the simplest Javascript I know.

‘onmouseover’

It is a nice a simple addition to the responsive gallery structure:

The big main image needs to be given a name:

<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>

Then the thumbnail images need to swap on mouse over:

<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>

This means the gallery code is:

<div id="background">
<div id="template">
<div>
<div>
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" name="main"/>
</div><!--switch-gallery-column switch-gallery-main-->
</div><!--switch-gallery switch-gallery-row-->
<div>
<div>
<img alt="" src="http://geishaface.co.uk/ebay/atlantic.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/atlantic.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/highlight.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/highlight.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/juicy%20melons.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/juicy%20melons.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
<div>
<img alt="" src="http://geishaface.co.uk/ebay/pinup%20pink.jpg" onmouseover="document.main.src='http://geishaface.co.uk/ebay/pinup%20pink.jpg';"/>
</div><!--switch-gallery-column switch-gallery-thumbs-->
</div><!--switch-gallery-crosspromo switch-gallery-row-->
<h1> Mouse over to zoom images</h1>
</div><!--template-->
</div><!--background-->

Next, is floating boxes and then a pulled together skeleton as this series has grown a little organically and I need to strip out some bits to make it easier to re-use.

Previous Post: Basic eBay Design Series 2013 Part 6 – Shrinking Responsive Gallery

Be Sociable, Share!

•