Printable View
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.
Just replace the bits in yellow with the paths to the three images.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>
Thank you so much for that!
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.
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
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>
Hello guysQuote:
Originally Posted by keyboard
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:Quote:
Originally Posted by Floxsnox
which is being populated by the list of links can go anywhere you like on the page. And the list of links:Code:<img src="" alt="Images" id="imageReplace"/>
can go anywhere as well. You can even have several lists of links located in different places on the page if you like.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>
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> </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>
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
Then just be guided by the first part of my reply. Any questions, just let me know
Quote:
Originally Posted by jscheuer1