J'ai une page où l'on peut voir un certain nombre d'images, dans un gridview (comme)Une image cliquable sur le dessus d'une image
Je veux que l'utilisateur de pouvoir les supprimer; Je veux mettre une petite image X dans le coin supérieur droit de chaque image. Quelle est la meilleure façon de le faire?
J'ai essayé avec Image Map mais je ne peux pas définir une image, seulement un lien.
Vous devrez le positionner sur l'image d'origine. Voici un exemple rapide:
J'ai fait une liste d'icônes, où chaque image est dans son propre élément li. Il peut s'agir de divs ou de n'importe quoi, tant que chaque image est enveloppée par un autre élément, et qu'une liste est sémantiquement la plus correcte. Ensemble avec chaque image est un lien avec une largeur et une hauteur de 16px et une image de fond d'une croix.
L'astuce est que l'élément autour de l'image a un position: relative. Cela signifie que tout ce qui se trouve à l'intérieur de cet élément li est relatif aux limites du li. Donc, si je donne maintenant à l'élément .cross un position: absolute avec une valeur supérieure et droite de 2px, cela signifie que la croix sera positionnée 2px en haut et à droite de l'élément de la liste.
La dernière chose que j'ai faite a été de donner les li articles display: inline-block afin qu'ils ne couvrent pas toute la largeur de la page, mais seulement la largeur du contenu à l'intérieur. Si vous connaissez la largeur de chaque image, vous pouvez également donner une largeur fixe à li.
Espérons que cela aide!
garder les images individuelles comme l'image d'arrière-plan de tout div, puis réglez l'image croix sur cette div
Sémantiquement ce ne serait pas correct, parce que les images réelles sont content et devraient être dans une balise 'img'. La croix est cependant mise en page, et devrait être définie comme arrière-plan d'un lien. –
Merci, ça marche à merveille! – Insecurefarm