Cette petite astuce vous permettra d'ajouter un ou plusieurs boutons ou images cliquables par-dessus une image.
Ceci est très pratique lorsqu'on veut permettre des opérations sur l'image ou sur l'item qu'elle représente.
L'astuce consiste à placer l'image et les boutons dans une division dont le positionnement est relatif (dans cet exemple : division avec la classe imageetcrud). Les boutons, quant à eux, seront placés dans une sous-division dont le positionnement est absolu (dans cet exemple : division avec la classe crud).
Ex :
<div class="imageetcrud">
<img src="monimage.png" ...>
<div class="crud">
<a href="...><img src="consulter.svg" class="consulter" ... /></a>
<a href="..."><img src="editer.svg" class="editer" ... /></a>
<a href="..."><img src="supprimer.svg" class="supprimer" ... /></a>
</div>
</div>
/* pour positionner une image sur une autre, celle du dessous doit être dans une division à position relative */
/* et celle du dessus doit être dans une division à position absolue */
.imageetcrud {
position: relative;
}
.crud {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(255,255,255,0.2);
border-radius: 5px;
padding: 5px;
}
.crud img {
vertical-align: middle;
max-height: 25px;
}
Il ne vous reste plus qu'à ajuster la position (top et right), la couleur de fond et autres paramètres esthétiques pour répondre à vos besoins.
Les classes appliquées aux boutons CRUD vous permettront de réagir à un clic via jQuery, au besoin.
▼Publicité
