 Images and Buttons |
  |
| will1969 |
 Oct 7 2014, 01:21 PM
Post
#1
|
|
Group: Members Posts: 4 Joined: 4-October 14 Member No.: 21,623  |
I have a page where I have a image displayed and 3 buttons underneath the image. The image displayed is the outdoor tool "hoe". I have the buttons named saw, hoe and tree trimmer below the image. What I want to do is when the user of the web page clicks a button, let's say for example tree trimmer the new image will appear on the page in place of the old image. Right now my code is messed up, it does not matter what image you click but only a image of a saw appears. Also I cannot get my image centered correctly. Does anyone have any suggestions to help me?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> img.shown {display: block; margin-left: auto; margin-right: auto; } </style> </head> <h1 style="text-align:center">A simple slide show</h1> <script> function pictureChange() { document.getElementById("shown").src="/tools/saw.jpg"; } </script> <body> <img id="shown" src="/tools/hoe.jpg";> <p><input type="button" id="theButton" value="Saw" onclick="pictureChange()"> </p> <p><input type="button" id="theButton" value="Hoe" onclick="pictureChange()"> </p> <p><input type="button" id="theButton" value="Tree Trimmer" onclick="pictureChange()"> </p> </body> </html> |
  |
 
|
| pandy |
Oct 7 2014, 02:31 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You must pass the URL to the image you want on to the function.
I'll assume your images are called saw.jpg, hoe.jpg and trimmer.jpg . Change that to reflect what they really are called. CODE function pictureChange(imgurl) { document.getElementById("shown").src='/tools/' + imgurl + '.jpg'; } HTML <input type="button" value="Saw" onclick="pictureChange('saw')"> <input type="button" value="Hoe" onclick="pictureChange('hoe')"> <input type="button" value="Tree Trimmer" onclick="pictureChange('trimmer')"> Also, an id is unique to a page. If the inputs really need IDs, you need to give them different ones (I removed it altogether above). |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd April 2024 - 06:34 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC