www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to make buttons interact with images.

  1. #1
    Join Date
    May 2011
    Posts
    2

    How to make buttons interact with images.

    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?

  2. #2
    Join Date
    May 2011
    Posts
    2
    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>

  3. #3
    Join Date
    May 2011
    Posts
    1
    document.getElementsByName()

  4. #4
    Join Date
    Mar 2011
    Posts
    37
    Replace the below code:
    Quote Originally Posted by idungotnosn View Post
    <script language="javascript" type="text/javascript">
    var changingImage = new Image();
    changingImage.src = "me.png";

    function changeImage() {
    changingImage.setAttribute("src", "me2.png");
    }

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

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