Using JavaScript to overwrite an image and replace with a new one on the same page

Question

I have a image scroller displaying thumbnails and another area where an enlarged picture of the thumb nail is displayed. I'm trying to use javascript to overwrite the large image when a different thumb nail is clicked. so clicking the thumb nail will replace the current large image with the new large image of the thumb nail, promblem is there is 31 thumb nails and i cant find a way to overwrite them using the show hid div method shown here.

adarshr · Accepted Answer · 2011-01-07 16:16:20Z

2

You don't need to hide/show divs. Just change the src attribute of the larger image each time a different thumbnail is clicked. That should get you want you want.

<script type="text/javascript">
function showLarge(srcLarge)
{
    document.getElementById("large").src = srcLarge;
}
</script>


<img src="/path/to/thumb1.jpg" onclick="showLarge('/path/to/large1.jpg')"/>
<img src="/path/to/thumb2.jpg" onclick="showLarge('/path/to/large2.jpg')"/>
<img src="/path/to/thumb3.jpg" onclick="showLarge('/path/to/large3.jpg')"/>

<img id="large" src="/path/to/large1.jpg"/>

answered Jan 7, 2011 at 16:16

adarshr

62.8k24 gold badges146 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob Over a year ago

thanks Adrash R that works perfectly, just a quick question, do u know how i can display the hyperlink cursor ( the little hand) as at current it doesnt change thank you

Rob Over a year ago

Thanks very much u have been a great help

Collectives™ on Stack Overflow

Using JavaScript to overwrite an image and replace with a new one on the same page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related