www.webdeveloper.com
Results 1 to 3 of 3

Thread: Changing Image and Link on Button Click

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    Changing Image and Link on Button Click

    Hello,

    I am sure this is a pretty simple problem but for the life of me I can't get it to work.

    I am setting up a page where there is a main graphic (which is a unique link) and three buttons to the side. On clicking the buttons, the graphic should change (and consequently the link).

    Clicking the buttons should therefore change both the image as well as the link. I understand the notion of changing the image source but would appreciate some feedback. I would also like my graphics to change in a cool manner if possible so any feedback is appreciated.

    This seems like a simple problem so I didn't paste any code -- if that would be helpful, I would be more than happy to.

    JS noob btw.

  2. #2
    Join Date
    Nov 2010
    Posts
    978
    here's one way of doing it:
    Code:
    <html>
    <head>
    </head>
    <body>
    <a id="thelink" href="http://www.google.com"><img id="thepic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/></a>
    <input type="button" onclick="changePic(1)" value="one"/>
    <input type="button" onclick="changePic(2)" value="two"/>
    <input type="button" onclick="changePic(3)" value="three"/>
    <script type="text/javascript">
    function changePic(num){
    switch (num){
    case 1:
    mylink="http://www.yahoo.com";
    mypic="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Points_of_a_horse.jpg/800px-Points_of_a_horse.jpg"
    break;
    case 2:
    mylink="http://www.facebook.com";
    mypic="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Horse-and-pony.jpg/800px-Horse-and-pony.jpg"
    break;
    case 3:
    mylink="http://www.webdeveloper.com";
    mypic="http://upload.wikimedia.org/wikipedia/commons/2/24/Horsescd1l-095.jpg"
    break;		
    	}
    document.getElementById("thepic").src=mypic;
    document.getElementById("thelink").href=mylink;
    }
    </script>
    </body>
    </html>
    there are a ton of ways to get the graphics to change in a cool manner, depending on what you're loooking for. You could describe the effect you want a little better, or just google "image transition javascript" and have a look at some demos

    hope that helps

  3. #3
    Join Date
    Mar 2012
    Posts
    2

    Thanks

    Very Helpful -- thanks a lot

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles