Comment créer un effet CSS pur Zoom sur onClick Image

CSS n'a pas de pseudo-classe pour cibler les événements de clic, et cela constitue l'un des plus gros points douloureux des développeurs front-end. La pseudo-classe la plus proche est :actif quels styles un élément pour la période pendant laquelle un utilisateur appuie dessus avec sa souris.

Cet effet est toutefois de courte durée: une fois que l'utilisateur relâche la souris, :actif ne fonctionne plus. Nous devons trouver un autre moyen de émuler l'événement click en CSS.

Cet article a été écrit en réponse à la demande d'un lecteur, et il expliquera comment cibler l'événement de clic avec du CSS pur dans un cas d'utilisation spécifique, zoom de l'image.

Vous pouvez voir le résultat final ci-dessous - une solution exclusivement CSS pour image zoom sur clic.

Quand utiliser la solution CSS uniquement

Avant de poursuivre, je tiens à dire que, pour le zoom d’image, je recommande la méthode CSS uniquement (qui modifie les dimensions de l’image), uniquement lorsque vous souhaitez une unique ou un groupe de quelques images avoir la fonction zoom.

Pour un correct galerie, JavaScript offre plus de flexibilité et d'efficacité.

Techniques frontales que nous utiliserons

Maintenant que vous avez été mis en garde, examinons rapidement le 3 techniques clés nous utiliserons:

1. le Balise HTML qui permet aux navigateurs de créer des zones de liaison sur une image. En savoir plus sur le élément dans mon post précédent.
2. le plan du site attribut du étiquette, qui relie l'image à la carte d'image.
3. le :cible Pseudo-classe CSS qui représente un élément qui a été ciblé à l'aide de son sélecteur d'identifiant.

1. Créer la base HTML

Commençons par créer la base HTML. Dans le code ci-dessous, nous ajoutons une image à agrandir et agrandir Et fermer les icônes du bouton pour zoomer et dézoomer.

Il est important d’avoir un identifiant sur l’image à zoomer et le bouton Fermer doit être un lien qui a le href = "#" attribut, je vais expliquer pourquoi plus tard dans le post.

2. Ajouter le CSS

Initialement, l'icône Fermer ne devrait pas être affiché. le position, marge-, la gauche, et bas Propriétés endroit la Icônes Développer et Fermer où nous voulons qu'ils soient - dans le coin supérieur droit de l'image.

le événements de pointeur: aucun; règle permet aux événements de la souris de passer à travers l'icône Expand et atteindre l'image.

 .img hauteur: 150px; largeur: 200px;  .close background-image: url ("Close-icon.png"); répétition de fond: non répétée; en bas: 418 pixels; affichage: aucun; hauteur: 32px; à gauche: 462px; marge supérieure: -32px; position: relative; largeur: 32px;  .expand bottom: 125px; marge gauche: -32px; marge droite: 16px; événements de pointeur: aucun; position: relative;  

3. Ajouter la carte d'image

Sur la carte, le zone cliquable devrait être dans le coin en haut à droite de l'image juste en dessous de l'icône Développer et de sa taille. Placer le élément avant le premier balise dans le HTML. Nous allons relier l'image à la carte dans l'étape suivante.

Dans le bloc de code ci-dessus, le balise définit le forme, taille et adresse URI d'une zone pouvant être liée à l'intérieur d'une carte d'image. Pour un Forme rectangulaire, la forme attribut prend la rect valeur, et la quatre valeurs du coords attribut représente la distance en pixels entre:

1. le bord gauche de l'image et le bord gauche de la zone de lien
2. le bord supérieur de l'image et le bord supérieur de la zone de lien
3. le bord gauche de l'image et le bord droit de la zone de lien
4. le bord supérieur de l'image et le bord inférieur de la zone de lien

La valeur de la href attribut doit être le identifiant de hachage de l'image (c’est pourquoi l’image devrait avoir une identifiant).

4. Lier l'image à la carte d'image

Ajouter le plan du site attribuer à l'image afin de le lier à la carte d'image. Sa valeur doit être le représentation hachée du prénom attribut du étiquette nous avons ajouté à l'étape 3.

La zone cliquable de la carte d'image maintenant se trouve derrière le bouton Expand. Lorsque l'utilisateur clique sur le bouton Développer, c'est la zone cliquable sur laquelle on clique en réalité. N'oubliez pas que nous avons créé le bouton Développer. “passable” avec le événements de pointeur: aucun; règle à l'étape 2.

De cette façon, l'utilisateur cible l'image elle-même en cliquant dessus, et après le clic, l’URI est suffixé par le "# img1" identifiant de fragment.

5. Style le :cible Pseudo-classe

Jusqu'à ce que le "# img1" identifiant de fragment est à la fin de l'URI, l'image ciblée peut être avec le style :cible pseudo-classe

Les dimensions de l'image ciblée augmentent, le bouton Fermer est affiché et le bouton Développer est masqué..

 .img: target height: 450px; largeur: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Comment fonctionne le bouton Fermer

Comme le bouton Fermer a été ajouté comme image d’arrière-plan (étape 2), il s’agit en fait d’une tag avec le href = # attribut (Étape 1), quand il est cliqué, il supprime l'identifiant de fragment à la fin de l'URI. C'est pourquoi aussi supprime le :cible pseudo-classe de l'image, et l'image retourne à sa taille précédente.

Informations de fond: Pourquoi et pas ?

A présent, vous comprenez certainement que le plus important pour que cette solution basée sur CSS fonctionne est de: cibler l'image à l'aide du href = "# imgid" attribut, qui pourrait également être fait en utilisant le tag à la place de la carte d'image.

le défaut la valeur pour forme attribut crée un zone de liaison rectangulaire qui couvre toute l'image. Si vous deviez utiliser au lieu de cela, vous devrez le coder pour couvrir l’image et vous devrez peut-être aussi utiliser un élément wrapper dans le même but..

Avant de prendre en charge les navigateurs IE, vous souhaiterez peut-être utiliser au lieu de , ou faites un zoom sur l'image en cliquant n'importe où dessus (dans ce cas, l'icône Développer ne sera pas nécessaire).