CODEWITHSUNDEEP
javascripthtmltags
Rob
Rob

Reputation: 1

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

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.

Upvotes: 0

Views: 2185

Answers (1)

adarshr
adarshr

Reputation: 62593

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"/>

Upvotes: 2

Related Questions