www.webdeveloper.com
Results 1 to 4 of 4

Thread: I need help with onClick image replacement!

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    Question I need help with onClick image replacement!

    Complete noob here. I'm simply making a page that displays image1. When the visitor clicks image1, the code needs to replace it with image2. I've searched hours on the web(including this forum) and haven't been able to figure this out. Helps greatly appreciated!

    Here's my code:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function image()
    {
    	document.getElementById("changeimage").innerHTML="http://howimetyourotaku.files.wordpress.com/2011/05/ultimate-rage-face.jpg";
    }
    </script>
    </head>
    
    <body id="changeimage">
    <img src="http://i3.kym-cdn.com/entries/icons/original/000/004/077/Raisins_Face.jpg" onClick="image();">
    </body>
    </html>

  2. #2
    Join Date
    Feb 2012
    Posts
    218
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function image()
    {
    	document.getElementById("changeimage").src="http://howimetyourotaku.files.wordpress.com/2011/05/ultimate-rage-face.jpg";
    }
    </script>
    </head>
    
    <body>
    	<img id="changeimage" src="http://i3.kym-cdn.com/entries/icons/original/000/004/077/Raisins_Face.jpg" onClick="image();">
    </body>
    </html>

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there a6turbo,

    and a warm welcome to these forums.

    If you are going to put the onclick event handler in the HTML code, then use this...
    Code:
    <img src="http://i3.kym-cdn.com/entries/icons/original/000/004/077/Raisins_Face.jpg" 
    onclick="this.src='http://howimetyourotaku.files.wordpress.com/2011/05/ultimate-rage-face.jpg'">
    
    ...but if you prefer the modern method of separating presentation from markup use this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <script type="text/javascript">
    
    function init(){
    document.getElementById('changeimage').onclick=function() {
       this.src='http://howimetyourotaku.files.wordpress.com/2011/05/ultimate-rage-face.jpg';
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    </head>
    <body>
    
    <div>
     <img id="changeimage" src="http://i3.kym-cdn.com/entries/icons/original/000/004/077/Raisins_Face.jpg" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  4. #4
    Join Date
    Mar 2012
    Posts
    2

    Smile

    Worked perfect, thanks guys.

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