PDA

View Full Version : 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
<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
<!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
<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
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:


<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:


<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:


<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


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


<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:


<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.