Results 1 to 10 of 10

Thread: Replace image when link clicked

  1. #1
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Replace image when link clicked

    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.

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,600
    Thanks
    57
    Thanked 99 Times in 97 Posts
    Blog Entries
    4

    Default

    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.
    Posting Tips + FAQ | Issues? Feel free to PM me
    - keyboard1333[at]gmail[dot]com

  3. #3
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much for that!

  4. #4
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,600
    Thanks
    57
    Thanked 99 Times in 97 Posts
    Blog Entries
    4

    Default

    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.
    Posting Tips + FAQ | Issues? Feel free to PM me
    - keyboard1333[at]gmail[dot]com

  5. #5
    Join Date
    Aug 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Oct 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by keyboard View Post
    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,440
    Thanks
    78
    Thanked 3,443 Times in 3,404 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Floxsnox View Post
    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Oct 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,440
    Thanks
    78
    Thanked 3,443 Times in 3,404 Posts
    Blog Entries
    12

    Default

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

    Quote Originally Posted by jscheuer1 View Post
    . . . 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •