HTML 5 image hover redimensionner et rediriger

J'utilise HTML 5 pour la première fois et je joue avec ce HTML5 canvas tutorial.HTML 5 image hover redimensionner et rediriger

J'ai changé l'exemple pour inclure 4 images et je veux être capable de détecter quelle image a été cliquée avant d'effectuer une redirection sur l'événement click.

Voici mon code tel qu'il est actuellement, quelqu'un peut-il me dire comment je peux détecter quelle image a été cliquée dans mon événement de clic? En outre, l'événement mouseout ne semble pas toujours redimensionner l'image, aucune idée pourquoi?

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
     body { 
      margin: 0px; 
      padding: 0px; 
     } 

     #myCanvas { 
      border: 0px; 
     } 
    </style> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic2d-v1.0.4.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script> 
     function initRectangles(rectangles){ 
      // initialize an array of rectangles that provide 
      // rectangular paths and properties for the images 
      return [{ 
       name: "buffalo", 
       image: null, 
       x: 40, 
       y: 45, 
       width: 80, 
       height: 80, 
       scale: 1 
      }, { 
       name: "indianapolis", 
       image: null, 
       x: 125, 
       y: 45, 
       width: 80, 
       height: 80, 
       scale: 1 
      }, { 
       name: "miami", 
       image: null, 
       x: 210, 
       y: 45, 
       width: 80, 
       height: 80, 
       scale: 1 
      }, { 
       name: "nyjets", 
       image: null, 
       x: 295, 
       y: 45, 
       width: 80, 
       height: 80, 
       scale: 1 
      }]; 
     } 

     function loadImages(sources, callback){ 
      var images = {}; 
      var loadedImages = 0; 
      var numImages = 0; 
      for (var src in sources) { 
       numImages++; 
      } 
      for (var src in sources) { 
       images[src] = new Image(); 
       images[src].onload = function(){ 
        if (++loadedImages >= numImages) { 
         callback(images); 
        } 
       }; 
       images[src].src = sources[src]; 
      } 
     } 

     function mapImages(rectangles, images){ 
      // map images to rectangles 
      var counter = 0; 
      for (var img in images) { 
       rectangles[counter++].image = images[img]; 
      } 
     } 

     function initStage(images){ 
      var rectangles = initRectangles(rectangles); 
      mapImages(rectangles, images); 

      kin = new Kinetic_2d("myCanvas"); 
      var context = kin.getContext(); 

      kin.setDrawStage(function() { 
       this.clear(); 
       var mousePos = kin.getMousePos(); 

       for (var n = 0; n < rectangles.length; n++) { 
        var rect = rectangles[n]; 

        context.save(); 
        context.translate(rect.x, rect.y); 
        context.scale(rect.scale, rect.scale); 
        kin.beginRegion(); 
        var rectX = -1 * rect.width/2; 
        var rectY = -1 * rect.height/2; 
        context.drawImage(rect.image, rectX, rectY, rect.width, rect.height); 
        context.beginPath(); 
        context.rect(rectX, rectY, rect.width, rect.height); 
        context.closePath(); 

        this.addRegionEventListener("mouseover", function() { 
         document.body.style.cursor = "pointer"; 
         rectangles[n].scale = 1.07; 
        }); 
        this.addRegionEventListener("mouseout", function() { 
         document.body.style.cursor = "default"; 
         rectangles[n].scale = 1; 
        }); 

        this.closeRegion(); 
        context.restore(); 
       } 
      }); 
     } 

     window.onload = function(){ 
      var sources = { 
       buffalo: "buffalo.png", 
       indianapolis: "indianapolis.png", 
       miami: "miami.png", 
       nyjets: "nyjets.png" 
      }; 

      loadImages(sources, initStage); 

      $("#myCanvas").click(function (e) { 


      }); 
     }; 
    </script> 
</head> 
<body> 
    <canvas id="myCanvas" width="400" height="90"> 
    </canvas> 
</body> 
</html>

Source

2011-11-05 user517406

Vous pouvez essayer d'ajouter 'this.addRegionEventListener ("clic", function() {});' dans la boucle '' for' en famille. setDrawStage() '. – ComFreek

J'ai déjà essayé, mais il semble que click ou onclick ou onClick ne soit pas un événement valide pour addRegionEventListener. – user517406

Essayez d'utiliser l'événement mouseup:

this.addRegionEventListener("mouseup", function() { 
    alert("mouse up"); 
});

Source

2011-11-05 16:46:45 scessor

HTML 5 image hover redimensionner et rediriger

Répondre

Questions connexes