Replace image when link clicked

**D13G0** · 03-19-2012, 09:29 PM

I have 3 links and each of them are different pictures. I'm trying to make it so when you click link 1, image 1 shows up. Then when you click link 2, image 2 replaces it and so on.

I can't seem to get it right and need some help doing this.

Hope you can help me or direct me to a thread that will solve this problem for me.

Thanks.

**keyboard** · 03-19-2012, 09:56 PM

Code:

<html>
<head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
}
</script>
</head>
<body>
<img src="" alt="Images" id="imageReplace"/><br />
<a href="#" onclick="changeImage('PATHTOIMAGE1.jpg');">Link1</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2.jpg');">Link2</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3.jpg');">Link3</a>
</body>
</html>

Just replace the bits in yellow with the paths to the three images.

**D13G0** · 03-20-2012, 04:25 PM

Thank you so much for that!

**keyboard** · 03-22-2012, 06:51 AM

You're welcome

If this thread is finished, please set it to resolved.
You can do this by editing your first post within the thread - Pressing go advanced - then where it says no prefix, selecting resolved then save.

**kapperson** · 08-26-2015, 07:30 PM

Hi there,
I'm new to this forum and pretty inexperienced when it comes to html, etc. I'm working with a coworker who is currently absent to develop a website. We used the above javascript and it worked great. I just wanted to see if there was a way to modify it so that multiple images would change when the link was clicked?

Any insight you can offer is greatly appreciated!

Thanks,
Kelsey

**vwphillips** · 08-27-2015, 12:29 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<base href="http://www.vicsjavascripts.org/StdImages/"  />
<script type="text/javascript">
function changeImage() {
 var a=changeImage.arguments,o,z0=0
 for (;z0<a.length;z0+=2){
  o=document.getElementById(a[z0]);
  if (o&&a[z0+1]){
   o.src = a[z0+1];
  }
 }
 return false;
}
</script>
</head>

<body>
<img src="1.gif" id="i1" />
<img src="1.gif" id="i2" />
<img src="1.gif" id="i3" />
<img src="1.gif" id="i4" />
<a href="#" onclick="return changeImage('i1','2.gif','i2','3.gif','i3','4.gif','i4','5.gif');">Link1</a>
<a href="#" onclick="return changeImage('i1','6.gif');">Link2</a>
<a href="#" onclick="return changeImage('i1','7.gif');">Link3</a>
<a href="#" onclick="return changeImage('i1','8.gif');">Link4</a>

</body>

</html>

**Floxsnox** · 10-31-2016, 08:07 AM

Originally Posted by keyboard

Code:

<html>
<head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
}
</script>
</head>
<body>
<img src="" alt="Images" id="imageReplace"/><br />
<a href="#" onclick="changeImage('PATHTOIMAGE1.jpg');">Link1</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2.jpg');">Link2</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3.jpg');">Link3</a>
</body>
</html>

Just replace the bits in yellow with the paths to the three images.

Hello guys
It's an old post and my 1st post.
I came across this while browsing am new just recently started learning about html and CSS.
Is it possible to keep a link in a different list and the picture is Displayed in another place in the same web page

**jscheuer1** · 10-31-2016, 01:59 PM

Originally Posted by Floxsnox

Hello guys
It's an old post and my 1st post.
I came across this while browsing am new just recently started learning about html and CSS.
Is it possible to keep a link in a different list and the picture is Displayed in another place in the same web page

Define "list". But if I understand you correctly, this is simpler than you may think. The image tag:

Code:

<img src="" alt="Images" id="imageReplace"/>

which is being populated by the list of links can go anywhere you like on the page. And the list of links:

Code:

<a href="#" onclick="changeImage('PATHTOIMAGE1.jpg');">Link1</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2.jpg');">Link2</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3.jpg');">Link3</a>

can go anywhere as well. You can even have several lists of links located in different places on the page if you like.

Further, we can modify the code so that more than one set of image/lists pairings are possible:

Code:

<html>
<head>
<script type="text/javascript">
function changeImage(element, id) {
document.getElementById(id).src = element;
}
</script>
</head>
<body>
<img src="" alt="Images" id="imageReplace"/><br />
<a href="#" onclick="changeImage('PATHTOIMAGE1.jpg', 'imageReplace');">Link1</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2.jpg', 'imageReplace');">Link2</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3.jpg', 'imageReplace');">Link3</a>
<p>&nbsp;</p>
<img src="" alt="Images" id="imageReplace2"/><br />
<a href="#" onclick="changeImage('PATHTOIMAGE1a.jpg', 'imageReplace2');">Link1a</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2a.jpg', 'imageReplace2');">Link2a</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3a.jpg', 'imageReplace2');">Link3a</a>
</body>
</html>

**Floxsnox** · 11-01-2016, 07:23 PM

Thanks for the reply
I mean the links on another part of the website
And the pictures are in another part .

Example I would like to keep the links on the top of the page but the pictures on the bottom as in between I will have a paragraph between them

**jscheuer1** · 11-02-2016, 12:21 AM

Then just be guided by the first part of my reply. Any questions, just let me know

Originally Posted by jscheuer1

. . . this is simpler than you may think. The image tag:

Code:

<img src="" alt="Images" id="imageReplace"/>

which is being populated by the list of links can go anywhere you like on the page. And the list of links:

Code:

<a href="#" onclick="changeImage('PATHTOIMAGE1.jpg');">Link1</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2.jpg');">Link2</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3.jpg');">Link3</a>

can go anywhere as well.

Thread: Replace image when link clicked

Thread Tools

Search Thread

Replace image when link clicked

Bookmarks

Bookmarks

Posting Permissions