Bonjour,

Je doit changer une image au clic en css. Je m'explique, j'ai un petit coeur pas rempli et si je clic dessus ca devient un petit coeur rempli. Je voulais inserer une image en css au clic et j'ai vu qu'on pouvait utiliser target mais je n'ai pas compris.

Merci d'avance!

Bonjour,

>> mais je n'ai pas compris.

Que n'as tu pas compris en fonction de l'exemple que je t'ai fais sur ton autre sujet.

Suite à la lecture de la documentation, quelles sont les zones d'ombres encore existante.

À ma connaissance, ce n’est pas possible de le faire en CSS pur. Mais pour ce faire en javascript, quelques lignes suffisent :

let etatActuel = false; //Vide
let image = document.getElementById("Image du bouton");
document.getElementById("tonBouton").onclick = function (event) {
    let newSrc;
    if (etatActuel == true) {
        newSrc = "ceur_remplis.png"
    } else {
        newSrc = "coeur_vide.png"
    }
    image.src = newSrc;
    etatActuel = !etatActuel;
}

Et encore, j’aurais pu éliminer quelque lignes ou utiliser JQuery,

J’éspère que cela t’aura servis.

Si , en HTML/CSS on peut faire un truc avec une transition. Tout dépend ensuite de ce que l'on veut faire et pas faire coté accessibilité.

Pour l'exemple d'un cœur  en se servant de

•  mask (css)  voir def sur mdn https://developer.mozilla.org/fr/docs/Web/CSS/mask
• :focus
• transition
• l'attribut tabindex pour autoriser le click
• un gradient en fond
• eventuellement un drop-shadow
• et un span  pour le HTML:

  <span tabindex=-1 class="heart"></span>

On peut articuler comme suit les règles CSS pour faire un petit coeur qui se rempli/vide au clique

.heart {
  aspect-ratio:1;
  width:160px;
  filter:drop-shadow(0 0 3px red);/* optionnal*/
  display:inline-block; 
}
.heart::before {
  content:'';
  display:block;
  width:100%;
  aspect-ratio:inherit;
  background:linear-gradient(to top, red,pink) bottom center / 100% 0% no-repeat  pink;  
  mask-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/160px-Heart_coraz%C3%B3n.svg.png);
  transition:0.5s;   
}
.heart:focus{
  pointer-events:none;/* toggle effect on click/focus, n'est plus cliquable si focused */
}
.heart:focus::before {
  background-size:300% 300%;/*painting */
}

exemple en ligne que tu peut copier : https://codepen.io/gc-nomade/pen/gOZqQZV

-
Edité par gcyrillus 10 octobre 2023 à 18:19:16