By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,730 Members | 1,546 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,730 IT Pros & Developers. It's quick & easy.

Changing the src and onmousedown URL with user input

P: 5
Im trying to make a script to change 3 links with user input, so when a user trys to change LINK1, it will go to all the LINK1 spots, same with LINK2 and LINK3.

Expand|Select|Wrap|Line Numbers
  1. <table style="background-color: black;" border="0"
  2. cellpadding="6" cellspacing="0">
  3. <tbody>
  4. <tr>
  5. <td colspan="3" valign="top" width="300"
  6. height="230">
  7. <center><font color="white" face="trebuchet ms"
  8. size="3"><b><i>Imageviewer<br>
  9. </i></b></font><img
  10. src="LINK1"
  11. name="prodimg" id="prodimg" width="285"><br>
  12. <br>
  13. </center>
  14. </td>
  15. </tr>
  16. <tr>
  17. <td>
  18. <center><img
  19. src="LINK1"
  20. onmousedown="document.images['prodimg'].src='LINK1';"
  21. width="70"> </center>
  22. </td>
  23. <td>
  24. <center><img
  25. src="LINK2"
  26. onmousedown="document.images['prodimg'].src='LINK2';"
  27. width="70"> </center>
  28. </td>
  29. <td>
  30. <center><img
  31. src="LINK3"
  32. onmousedown="document.images['prodimg'].src='LINK3';"
  33. width="70"> </center>
  34. </td>
  35. <!--PICS--> </tr>
  36. </tbody>
  37. </table>

Any help would be appreciated
Jul 20 '11 #1
Share this Question
Share on Google+
9 Replies


Rabbit
Expert Mod 10K+
P: 12,430
I have no idea what you're trying to do. First of all, you're saying you're changing links. But you're actually changing the source for an image. So I don't know if you actually want to change links or you want to change images.

Second, the code seems to work as intended. Which means you're trying to do something not intended. Which you have not explained clearly.
Jul 20 '11 #2

P: 5
The code works as its supposed to now, but i want to be able to have another person(sales staff) to be able to input three links to the different pictures, in order to change the links themselves without dealing with the code part.
Jul 21 '11 #3

Rabbit
Expert Mod 10K+
P: 12,430
In the on load event of the body, store the 3 "links" in global variables. And in your code, use those variables instead. Then the user just needs to change the image source in the html without having to change the code.
Jul 21 '11 #4

P: 5
Seems like its a little above my level. How would the code look with that?
Jul 21 '11 #5

Rabbit
Expert Mod 10K+
P: 12,430
I make no guarantees for the code, I did not test it. But it gets the point across.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             var link1, link2, link3
  5.  
  6.             function loadLinks() {
  7.                 link1 = document.getElementById("link1");
  8.                 link2 = document.getElementById("link2");
  9.                 link3 = document.getElementById("link3");
  10.             }
  11.         </script>
  12.     </head>
  13.  
  14.     <body onload="loadLinks();">
  15.         <img id="masterimg" src="image1.jpg" />
  16.  
  17.         <img id="link1" src="image1.jpg" onclick="document.getElementById('masterimg').src = link1;" />
  18.         <img id="link2" src="image2.jpg" onclick="document.getElementById('masterimg').src = link2;" />
  19.         <img id="link3" src="image3.jpg" onclick="document.getElementById('masterimg').src = link3;" />
  20.     </body
  21. </html>
Jul 21 '11 #6

P: 5
Thanks for the example, ill base off that. Any idea how to incorporate form inputs in to change the current src's?
Jul 21 '11 #7

Rabbit
Expert Mod 10K+
P: 12,430
This will return the value in a form control.
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("FormInputID").value
Jul 21 '11 #8

P: 5
I must be doing this completely wrong..?

Thanks for all ur help so far, btw.


Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             var link1, link2, link3
  5.  
  6.             function loadLinks() {
  7.                 link1 = document.getElementById("url1").value;
  8.                 link2 = document.getElementById("link2");
  9.                 link3 = document.getElementById("link3");
  10.             }
  11.         </script>
  12.     </head>
  13.  
  14.     <body onload="loadLinks();">
  15.         <img id="masterimg" src="image1.jpg" />
  16.  
  17. document.getElementById("FormInputID").value
  18.         <img id="link1" src="image1.jpg" onclick="document.getElementById('masterimg').src = link1;" />
  19.         <img id="link2" src="image2.jpg" onclick="document.getElementById('masterimg').src = link2;" />
  20.         <img id="link3" src="image3.jpg" onclick="document.getElementById('masterimg').src = link3;" />
  21.  
  22.  
  23. <br><br><br><Br>
  24. <form>
  25. New URL: <input name="url1" type="text">
  26. <br>
  27. New URL: <input name="url1" type="text">
  28. <br>
  29. New URL: <input name="url1" type="text">
  30. <br>
  31.  
  32. </form>
  33.     </body>
  34. </html>
Jul 21 '11 #9

Rabbit
Expert Mod 10K+
P: 12,430
If you're trying to let the user change the image with the form inputs, you haven't done anything to the code to allow for that. You gave all your inputs the same name. Also, you're going to need to use the id attribute as well.
Jul 21 '11 #10

Post your reply

Sign in to post your reply or Sign up for a free account.