HTML - Mettre en place un bouton avec une forme cliquable personnalisée à partir d'une image PNG avec transparence

Question

je l'image PNG suivante avec transparence:

Je voudrais faire un bouton dans HTML & CSS que les utilisations le canal alpha en tant que masque, de sorte qu'il ne fonctionne que si les utilisateurs cliquent dans la zone rose.

Est-ce possible? Comment peut-il être mis en œuvre?

Answer 1

Vous pouvez vérifier l'image-carte HTML map Tag

Answer 2

Vous devez dessiner votre image dans un canvas pour obtenir les valeurs de pixel et vérifier la valeur du canal alpha:

const messageBox = document.getElementById('messageBox'); 
 
const imageButton = document.getElementById('imageButton'); 
 
const canvas = document.createElement('canvas'); 
 
const context = canvas.getContext('2d'); 
 
const width = imageButton.width; 
 
const height = imageButton.height; 
 

 
canvas.width = width; 
 
canvas.height = height; 
 

 
context.drawImage(imageButton, 0, 0, width, height); 
 

 
imageButton.onclick = function(e) { 
 
    const alpha = context.getImageData(e.offsetX, e.offsetY, 1, 1).data[3]; 
 
    
 
    switch (alpha) { 
 
    case 255: 
 
     messageBox.innerText = "Inside clicked"; 
 
     
 
     break; 
 
     
 
    case 0: 
 
     messageBox.innerText = "Outside clicked"; 
 
     
 
     // Here you could do e.preventDefault(); if this is a form submit event or something like that. 
 
     
 
     break; 
 
     
 
    default: 
 
     messageBox.innerText = "Border clicked."; 
 
     
 
     // Decide how to handle clicks in the border or change the switch for an if and define a range of valid and invalid values for the alpha channel. 
 
     
 
     break; 
 
    } 
 
};

#imageButton { 
 
    box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .5); 
 
    cursor: pointer; 
 
    width: 100px; 
 
}

<img id="imageButton" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" /> 
 

 
<div id="messageBox"></div>

Remarque J'utilise un petit URI de données au lieu de votre image pour éviter les problèmes Cross-Origin ou une réponse supérieure à celle autorisée.