Thread: Onmouseover

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2

    Onmouseover


    Hello

    Code:
    <!DOCTYPE html> 
    <html> 
    <body> 
    <canvas id="myCan" height = "500" width="500">If nothing is displayed please use a browser that supports canvas</canvas> 
    <script> 
    var $canvas = document.getElementById("myCan"); 
    var $draw = $canvas.getContext("2d"); 
    
    function square()
    {
    $draw.fillStyle="red";
    $draw.fillRect(300,300,150,150);
    }
    
    </script> 
    </body> 
    </html>
    What I want to do here is use onmouseover to change the size of the square. When the mouse hovers over the box becomes smaller. Thanks ~ Nick
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,134
    Rep Power
    120
    Try this... it's a quick solution to what your wanting to do:
    Code:
    <!DOCTYPE html> 
    <html>
    <head>
    <style>
    #cHolder {
    width:501px;
    height:501px;
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    
    var set;
    
    $("document").ready(function(){
    
      $("#myCan").mouseover(function(){
       $("#myCan").hide();
       if(set!="yes"){
        $("#cHolder").append("<canvas id=\"myCan2\" width=\"500\" height=\"500\">If nothing is displayed please use a browser that supports canvas</canvas>");
        var canvas = document.getElementById("myCan2"); 
        var draw = canvas.getContext("2d");
        draw.fillStyle="red";
        draw.fillRect(300,300,50,50);
        set="yes";
       }
       else{
        $("#myCan2").show();
       }
      });
    
      $("#cHolder").mouseleave(function(){
       $("#myCan2").hide();
       $("#myCan").show();
      });
      
    });
    </script>
    </head>
    <body> 
    
    <div id="cHolder">
    <canvas id="myCan" width="500" height="500">If nothing is displayed please use a browser that supports canvas</canvas> 
    </div>
    
    <script> 
    var $canvas = document.getElementById("myCan"); 
    var $draw = $canvas.getContext("2d"); 
    
    function square()
    {
    $draw.fillStyle="red";
    $draw.fillRect(300,300,150,150);
    }
    
    window.onload = function(){
    square();
    }
    
    </script>
    
    </body> 
    </html>

    Comments on this post

    • Nykinum agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    66
    Rep Power
    2
    thanks

IMN logo majestic logo threadwatch logo seochat tools logo