How to make buttons interact with images.

**idungotnosn** · 05-29-2011 03:32 PM

I'm a noobie to javascript in general. The question that I can't seem to wrap my head around is how I can't make these buttons interact with a particular image. Here is my code:

Code:

<html>
<head>
	<title>Moving Images</title>
</head>
<body>

<img src="me.png" name="changePic" alt="That's me!">

<script language="javascript" type="text/javascript">
	var changingImage = new Image();
	changingImage.src = "me.png";
	
	function changeImage() {
		changingImage.setAttribute("src", "me2.png");
	}

</script>

	
<input type="button" value="Change Image" onClick="changeImage()" class="run_button">

</body>
</html>

I want to make it so that the "Change Image" button changes the .src variable of myImage. For some reason, it won't change the data for the image. Can anyone help?

**idungotnosn** · 05-29-2011 03:37 PM

I revised the code a little bit. Still doesn't work though. Any help?

Code:

<html>
<head>
	<title>Moving Images</title>
</head>
<body>

<img src="me.png" name="changePic" alt="That's me!">

<script language="javascript" type="text/javascript">
	var changingImage = getElementByName("changePic");
	changingImage.src = "me.png";
	
	function changeImage() {
		changingImage.setAttribute("src", "me2.png");
	}

</script>

	
<input type="button" value="Change Image" onClick="changeImage()" class="run_button">

</body>
</html>

**Toubs** · 05-29-2011 04:07 PM

document.getElementsByName()

**krieya** · 05-30-2011 03:59 AM

Replace the below code:

Originally Posted by idungotnosn

With this

Code:

<script language="javascript" type="text/javascript">
	function changeImage() {
		document.getElementsByName("changePic")[0].setAttribute("src", "me2.png");
	}

</script>

Thread: How to make buttons interact with images.

Thread Tools

Display

How to make buttons interact with images.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions