dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Click Event on Image

  1. #1
    Join Date
    Jun 2017
    Posts
    8

    Click Event on Image

    Can anyone help me with a Click Event On Image?

    When I click the image I want it to return to its original size. I couldn't find a solution by myself.

    Below is my code:

    HTML Code:
    <script>
    
    function myFunctionOne(){
      document.getElementById('bird').width = "200";
       document.getElementById('bird').height = "200";
    
    //this make the image height and weight double its original size
    
    }
    
    function myFunctionTwo(){
      document.getElementById('bird').style.visibility ="";
    
    //When I click the image I want it to return to original size. This is what I am needing help with 
    }
    
    </script>
    
    
    <p onmouseover="myFunctionOne()"><img id="bird" src="bird.jpg" width="100" height="100"  onclick="myFunction4()" /></p>
    

  2. #2
    Join Date
    Jun 2017
    Posts
    8
    onclick = "myFunctionTwo()" /> I spotted the error but this doesn't fix the problem.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,558
    Quote Originally Posted by mizocoder View Post
    Can anyone help me with a Click Event On Image?
    I have not tested this but the theory is this, you use the data attribute in the image tag and put in there the original height and width, the onclick calls the function and passes an object reference to itself to the function.

    In the function the function uses the object to get the data attribute tag, compare it to the current size and if it matches the default, the result is to enlarge the image and if not to reduce it. Well thats the theory so now you can try it.
    HTML Code:
    <script>
    function resizeMe( obj ){
       var oHt = Number( obj.getAttribute("data-original-height") );
       var oWd = Number( obj.getAttribute("data-original-width") );
    
       obj.height = ( obj.height == oHt ) ? 200 : oHt;
       obj.width = ( obj.width == oWd ) ? 200 : oWd;
    }
    </script>
    <p ><img id="bird" src="bird.jpg" data-original-height="100" data-original-width="100" width="100" height="100"  onclick="resizeMe( this )" /></p>
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

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