Javascript Girl
  1. Javascript Girl
  3. Comment faire pour que le survol de la transparence dans un PNG ne compte pas comme planant?
Intereting Posts
XOR de deux chaînes hexagonales en JavaScript Faire l'en-tête HTML5 avec IE – HTML5 Shiv ne corrige pas ma mise en page Empêcher js alert () des interrupteurs de pause Ajax télécharge un fichier du navigateur vers le serveur FTP Comment avoir des polices transparentes à l'exception du 'text-caret' dans une zone de texte? TypeError: indéfini n'est pas une fonction dans Angular Resource Comment mettre à jour les chaînes d'URL ou de requête en utilisant javascript / jQuery sans recharger la page? Fermer le domaine transversal de l'iframe Devrais-je lier le nuage d'API Google pour les bibliothèques JS? Est-ce que Jshint comprend Angular? Enveloppez chaque mot d'un contenu html dans une portée La fonction JavaScript Date.UTC () est désactivée d'un mois? Tout javascript devrait-il passer dans un fichier js distinct XMLHttpRequest Level 2 – Déterminé si le téléchargement est terminé Comment vérifier si une chaîne est une représentation de couleur hexadélectronique valide?

Comment faire pour que le survol de la transparence dans un PNG ne compte pas comme planant?

Lorsque je passe sur la partie transparente d'un PNG, il agit toujours comme si je roule sur l'image réelle. Existe-t-il un moyen pour éviter que cela ne se produise? Pour qu'il ne prenne des mesures que lorsque je passe sur la partie visible de l'image, et non la partie transparente?

J'ai essayé de supprimer la transparence, mais je ne pouvais pas trouver comment.

Peut être fait en convertissant png en élément de toile

Cela fonctionne en chargeant un png dans un élément de lien HTML-5, puis en interrogeant le canevas pour la valeur alpha du pixel cliqué.

Démonstration de travail: http://jsfiddle.net/x9ScK/3/

HTML comme suit … 

 <!-- create a canvas element to hold the PNG image --> <canvas id="canvas1" width="500" height="500"></canvas>

Javascript aime ça … 

 // select the canvas element with jQuery, and set up // a click handler for the whole canvas $('#canvas1').on('click', function(e) { // utility function for finding the position of the clicked pixel function findPos(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; } // get the position of clicked pixel var pos = findPos(this); var x = e.pageX - pos.x; var y = e.pageY - pos.y; // get reference to canvas element clicked on var canvas = this.getContext('2d'); // return array of [RED,GREEN,BLUE,ALPHA] as 0-255 of clicked pixel var pixel = canvas.getImageData(x, y, 1, 1).data; // if the alpha is not 0, we clicked a non-transparent pixel // could be easily adjusted to detect other features of the clicked pixel if(pixel[3] != 0){ // do something when clicking on image... alert("Clicked the dice!"); } }); // get reference to canvas DOM element var canvas = $('#canvas1')[0]; // get reference to canvas context var context = canvas.getContext('2d'); // create an empty image var img = new Image(); // after loading... img.onload = function() { // draw the image onto the canvas context.drawImage(img, 0, 0); } // set the image source (can be any url - I used data URI to keep demo self contained) img.src = "data:image/png;base64,iVBORw0KGgoAAAANS ... more image data ...TkSuQmCC"; // PNG with transparency

Je sais que j'ai vu des sites qui vous permettent de choisir une couleur en fonction du pixel sur lequel vous vous déplacez. Je ne sais pas comment ils le font, mais une option est de créer une carte d'image html (comme celle-ci) , de sorte que les différentes parties de votre PNG déclenchent le «vol stationnement» et les autres parties. Essentiellement, la souris ne roule pas sur la PNG; Il roule sur des zones que vous définissez dans votre HTML.

Voici un exemple que j'ai pris directement à partir du lien ci-dessus: 

 <body> <img src="trees.gif" usemap="#green" border="0"> <map name="green"> <area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html"> <area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html"> <area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html"> </map> </body>