Changing the src and onmousedown URL with user input

**Rabbit** · Jul 20 '11, 10:50 PM

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.

**Joe Strom** · Jul 21 '11, 04:54 PM

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.

**Rabbit** · Jul 21 '11, 04:58 PM

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.

**Joe Strom** · Jul 21 '11, 05:00 PM

Seems like its a little above my level. How would the code look with that?

**Rabbit** · Jul 21 '11, 05:06 PM

I make no guarantees for the code, I did not test it. But it gets the point across.

Code:

<html>
	<head>
		<script type="text/javascript">
			var link1, link2, link3
			
			function loadLinks() {
				link1 = document.getElementById("link1");
				link2 = document.getElementById("link2");
				link3 = document.getElementById("link3");
			}
		</script>
	</head>
	
	<body onload="loadLinks();">
		<img id="masterimg" src="image1.jpg" />
	
		<img id="link1" src="image1.jpg" onclick="document.getElementById('masterimg').src = link1;" />
		<img id="link2" src="image2.jpg" onclick="document.getElementById('masterimg').src = link2;" />
		<img id="link3" src="image3.jpg" onclick="document.getElementById('masterimg').src = link3;" />
	</body
</html>

**Joe Strom** · Jul 21 '11, 05:10 PM

Thanks for the example, ill base off that. Any idea how to incorporate form inputs in to change the current src's?

**Rabbit** · Jul 21 '11, 05:41 PM

This will return the value in a form control.

Code:

document.getElementById("FormInputID").value

**Joe Strom** · Jul 21 '11, 05:54 PM

I must be doing this completely wrong..?

Thanks for all ur help so far, btw.

Code:

<html>
    <head>
        <script type="text/javascript">
            var link1, link2, link3

            function loadLinks() {
                link1 = document.getElementById("url1").value;
                link2 = document.getElementById("link2");
                link3 = document.getElementById("link3");
            }
        </script>
    </head>

    <body onload="loadLinks();">
        <img id="masterimg" src="image1.jpg" />

document.getElementById("FormInputID").value
        <img id="link1" src="image1.jpg" onclick="document.getElementById('masterimg').src = link1;" />
        <img id="link2" src="image2.jpg" onclick="document.getElementById('masterimg').src = link2;" />
        <img id="link3" src="image3.jpg" onclick="document.getElementById('masterimg').src = link3;" />


<br><br><br><Br>
<form>
New URL: <input name="url1" type="text">
<br>
New URL: <input name="url1" type="text">
<br>
New URL: <input name="url1" type="text">
<br>

</form>
    </body>
</html>

**Rabbit** · Jul 21 '11, 06:44 PM

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.

Changing the src and onmousedown URL with user input

Changing the src and onmousedown URL with user input

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment