web-dev-qa-db-fra.com

Comment changer une image au clic en utilisant CSS seul?

J'ai une image et lorsque l'on clique sur l'image, je veux révéler une autre image en dessous. Je cherche une solution simple CSS uniquement.

Est-ce possible?

htmlcssimage
15
L84

Vous pouvez utiliser un <a> tag avec différents styles:

a:link    { }
a:visited { }
a:hover   { }
a:active  { }

Je recommanderais de l'utiliser en conjonction avec les sprites CSS: https://css-tricks.com/css-sprites/

10
evilpenguin

Une solution CSS pure

Abstrait

Une entrée de case à cocher est un élément natif servant à implémenter la fonctionnalité de basculement, nous pouvons l'utiliser à notre avantage.

Utilisez le :checked pseudo classe - attachez-la à un pseudo-élément d'une case à cocher (puisque vous ne pouvez pas vraiment affecter l'arrière-plan du input lui-même), et changez son arrière-plan en conséquence.

La mise en oeuvre

input[type="checkbox"]:before {
    content: url('images/icon.png');
    display: block;
    width: 100px;
    height: 100px;
}
input[type="checkbox"]:checked:before {
    content: url('images/another-icon.png');
}

Démo

Voici une démo de travail complète sur jsFiddle pour illustrer l'approche.

Refactoring

C'est un peu lourd, et nous pourrions apporter des modifications pour nettoyer les choses inutiles; comme nous n'appliquons pas vraiment une image d'arrière-plan, mais que nous définissons plutôt le content de l'élément, nous pouvons omettre les pseudo-éléments et le définir directement dans la case à cocher.

Certes, ils ne servent à rien ici mais à masquer le rendu natif de la case à cocher. Nous pourrions simplement les supprimer, mais cela entraînerait un FOUC dans le meilleur des cas, ou si nous ne parvenons pas à récupérer l'image, cela affichera simplement une énorme case à cocher.

Entre la propriété appearance:

Le (-moz-)appearance La propriété CSS est utilisée ... pour afficher un élément en utilisant un style natif de la plateforme basé sur le thème du système d'exploitation.

nous pouvons remplacer le style natif de la plate-forme en affectant appearance: none et contourner complètement ce problème (nous devons naturellement tenir compte des préfixes des fournisseurs et le formulaire sans préfixe n'est pris en charge nulle part, pour le moment). Les sélecteurs sont alors simplifiés et le code est plus robuste.

La mise en oeuvre

input[type="checkbox"] {
    content: url('images/black.cat');
    display: block;
    width: 200px;
    height: 200px;
    -webkit-appearance: none;
}
input[type="checkbox"]:checked {
    content: url('images/white.cat');
}

Démo

Encore une fois, une démo en direct de la version refactorisée est sur jsFiddle .

Les références

Remarque: cela ne fonctionne que sur le webkit pour l'instant, j'essaye de le faire réparer pour les moteurs gecko également. Publiera la version mise à jour une fois que je le ferai.

16
Eliran Malka

Cela introduit un nouveau paradigme pour HTML/CSS, mais en utilisant un <input readonly="true"> vous permettrait d'ajouter un input:focus sélecteur pour ensuite modifier le background-image

Bien sûr, cela nécessiterait d'appliquer du CSS spécifique au input lui-même pour remplacer les paramètres par défaut du navigateur, mais cela montre que les actions de clic peuvent en effet être déclenchées sans utiliser Javascript.

4
daleyjem

Essayez ceci (mais une fois cliqué, il n'est pas réversible):

HTML:

<a id="test"><img src="normal-image.png"/></a>

CSS:

a#test {
    border: 0;
}
a#test:visited img, a#test:active img {
    background-image: url(clicked-image.png);
}
4
nfechner

certaines personnes ont suggéré le "visité", mais les liens visités restent dans le cache des navigateurs, donc la prochaine fois que votre utilisateur visitera la page, le lien aura la deuxième image .. je ne sais pas si c'est l'effet désiré que vous voulez. Quoi qu'il en soit, vous pouvez mélanger JS et CSS:

<style>
.off{
    color:red;
}
.on{
    color:green;
}
</style>
<a href="" class="off" onclick="this.className='on';return false;">Foo</a>

en utilisant l'événement onclick, vous pouvez changer (ou basculer peut-être?) le nom de classe de l'élément. Dans cet exemple, je change la couleur du texte mais vous pouvez également changer l'image d'arrière-plan.

Bonne chance

4
pleasedontbelong

Vous pouvez utiliser les différents états du lien pour différentes images exemple

Vous pouvez également utiliser la même image ( css Sprite ) qui combine tous les différents états, puis jouer avec le rembourrage et la position pour n'afficher que celui que vous souhaitez afficher.

Une autre option serait d'utiliser javascript pour remplacer l'image, ce qui vous donnerait plus de flexibilité

2
jasalguero

Non, vous aurez besoin d'un script pour placer un gestionnaire clickEvent sur le Element qui fait ce que vous voulez.

1
FK82