Comment rendre la zone d'un div cliquable? Pas tout div!

Question

Si vous avez une image d'arrière-plan dans un div avec un bouton (dessiné) au milieu et d'autres dessins autour d'elle. Comment faire pour que le bouton soit cliquable mais pas tout le div parce que je ne veux pas que l'utilisateur clique sur les dessins qui l'entourent, si c'est logique!? Je perds mon temps à jouer avec les marges et les marges? Devrais-je simplement créer deux divs? Mon patron dit qu'il a réussi à le faire en utilisant un div auparavant.

Salutations

Answer 1

Placez un élément transparent et relativement positionné à l'intérieur de la div. Placez-le en haut du bouton et faites-en la même taille que le bouton. Rendre l'élément clic capable.

Answer 2

En bref - vous ne le faites pas.

Les fonds sont les arrière-plans. Ils ne sont pas contents. Ils ne sont pas interactifs.

Il est possible de contourner cela, mais vous ne devriez pas. Si vous avez du contenu avec lequel l'utilisateur peut interagir, présentez-le en tant que contenu. Utilisez un <img>.

Answer 3

Vous pouvez faire la div « position: relative » et puis placez une < une étiquette > sur le dessin à l'aide

display: block; 
width: your_width; 
height: your_height; 
position: absolute; 
left: your_position_x; 
top: your_position_y; 

Ce serait la manière la plus propre.

Answer 4

Essayez ce code:

#container { width:200px; height:100px; position:relative } 
#clicker { display:block; width:20px; height:10px; position:absolute; top:20px; left:100px; } 

<div id="container"> 
    <a id="clicker" href="#link"></a> 
</div> 

évidemment changer toutes les dimensions pour correspondre à la zone que vous voulez faire cliquable.