Image swap onClick

what's the best way to do it?

[martinship]

In implementing a book cover image swap, I went back to some ancient code I'd hacked together. Here's how I did it back then:

<a href=#>
<img src="images/books/front/foo-front.jpg" height="280" name="swap" width="210"></a>
<br>
<a href="#" onClick="swap.src='images/books/front/foo-front.jpg'; return false">Front</a> 
¦
<a href="#" onClick="swap.src='images/books/back/foo-back.jpg'; return false">Back</a>

With javascript turned on, this works fine. With javascript off, clicking the "back" and "front" links takes visitors back to the top of the page, which is a little confusing.

Basically, and generically, I want to be able to show off multiple product images.

So, what's the best way of dealing with this?

[ashish21cool]

Possibly, you can use Onmouseover events mouseout events..

[daveVk]

Simple alternative

<a href="images/books/back/foo-back.jpg" onClick="swap.src='images/books/back/foo-back.jpg'; return false">Back</a>

or

<a href="images/books/back/foo-back.jpg" onClick="swap.src=this.href; return false">Back</a>

Or maybe display all images and have javascript hide all bar the one required. That way the search engines see all images in context.

[martinship]

Thanks, Dave.

Here's the complete new code then:

<img alt="Book Cover" src="../covers/foo-f.jpg" name="swap" width="180" height="280" />
<a href="../covers/foo-f.jpg" onClick="swap.src=this.href; return false">Front</a> ¦ 
<a href="../covers/foo-b.jpg" onClick="swap.src=this.href; return false">Back Cover</a>

No <a><img></a> required for the swap, I see. And it now degrades gracefully!