Come creare Pure CSS onClick Image Zoom Effect
CSS non ha uno pseudoclass per targeting degli eventi click, e questo costituisce uno dei più grandi punti dolenti di sviluppatori front-end. La pseudo-classe più vicina è :attivo
quale stile un elemento per il periodo di tempo in cui un utente preme il mouse su di esso.
Questo effetto è tuttavia di breve durata: una volta che l'utente ha rilasciato il mouse, :attivo
non funziona più. Dobbiamo trovare un altro modo per emulare l'evento click in CSS.
Questo post è stato scritto in risposta alla richiesta di un lettore e spiegherà come indirizzare l'evento click con puro CSS in un caso d'uso specifico, zoom dell'immagine.
Puoi vedere il risultato finale di seguito - una soluzione solo CSS per zoom dell'immagine al clic.
Quando utilizzare la soluzione solo CSS
Prima di procedere, voglio dire, che per lo zoom dell'immagine raccomando il metodo solo CSS (che modifica le dimensioni dell'immagine), solo quando si desidera un singolo o a gruppo di poche immagini per avere la funzione di zoom.
Per un corretto galleria, JavaScript offre più flessibilità ed efficienza.
Tecniche front-end che useremo
Ora che sei stato avvertito, esaminiamo rapidamente il 3 tecniche chiave useremo:
- Il
Tag HTML che consente ai browser di crea aree collegabili su un'immagine. Maggiori informazioni su
elemento nel mio post precedente.
- Il
usemap
attributo deletichetta, che collega l'immagine alla mappa immagine.
- Il
:bersaglio
Pseudo-classe CSS che rappresenta un elemento che è stato bersagliato usando il suo selettore ID.
1. Creare la base HTML
Per prima cosa, creiamo la base HTML. Nel codice qui sotto, aggiungiamo un'immagine da ingrandire e ingrandire & chiudi le icone dei pulsanti per ingrandire e rimpicciolire.
È importante avere un ID sull'immagine da ingrandire, e il pulsante Chiudi deve essere un collegamento che ha il href = "#"
attributo, ti spiegherò perché più avanti nel post.
2. Aggiungi il CSS
Inizialmente, l'icona Chiudi non dovrebbe essere visualizzato. Il posizione
, margine-
, sinistra
, e parte inferiore
proprietà posto il Espandi e chiudi le icone dove vogliamo che siano - nell'angolo in alto a destra dell'immagine.
Il pointer-events: none;
regola consente agli eventi del mouse di passare attraverso l'icona Espandi e raggiungere l'immagine.
.img height: 150px; larghezza: 200 px; .close background-image: url ("Close-icon.png"); background-repeat: no-repeat; fondo: 418 px; display: nessuno; altezza: 32px; a sinistra: 462 px; margin-top: -32px; posizione: relativa; larghezza: 32 px; .expand bottom: 125px; margin-left: -32px; margin-right: 16px; pointer-events: none; posizione: relativa;
3. Aggiungi la mappa immagine
Sulla mappa immagine, il area cliccabile dovrebbe essere nell'angolo in alto a destra dell'immagine appena sotto l'icona Espandi e le sue dimensioni. Posiziona il elemento prima del primo
tag nell'HTML. Legheremo l'immagine alla mappa nel prossimo passaggio.
Nel blocco di codice sopra, il tag definisce il forma, dimensione e URI di un'area linkabile all'interno di una mappa immagine. Per un forma rettangolare, il
forma
l'attributo prende il rect
valore, e il quattro valori del coords
l'attributo rappresenta la distanza in pixel tra:
- il bordo sinistro dell'immagine e il bordo sinistro dell'area di collegamento
- il bordo superiore dell'immagine e il bordo superiore dell'area di collegamento
- il bordo sinistro dell'immagine e il bordo destro dell'area di collegamento
- il bordo superiore dell'immagine e il bordo inferiore dell'area di collegamento
Il valore del href
l'attributo deve essere il identificatore di hash dell'immagine (questo è il motivo per cui l'immagine dovrebbe avere un id
).
4. Associare l'immagine alla mappa immagine
Aggiungi il usemap
attribuire all'immagine in modo tale da legalo alla mappa immagine. Il suo valore deve essere il rappresentazione hash del nome
attributo del etichetta abbiamo aggiunto nel passaggio 3.
L'area cliccabile della mappa immagine ora si trova dietro il pulsante Espandi. Quando l'utente fa clic sul pulsante Espandi, è l'area cliccabile su cui viene fatto clic in realtà: ricorda che abbiamo creato il pulsante Espandi “accettabile” con il pointer-events: none;
regola nel passaggio 2.
In questo modo l'utente bersaglia l'immagine stessa facendo clic su di esso, e dopo il clic l'URI viene contrassegnato con il suffisso "# Img1"
identificatore di frammento.
5. Stile il :bersaglio
Pseudo-Class
Fino al "# Img1"
l'identificatore di frammento è alla fine dell'URI, l'immagine targetted può essere in stile con il :bersaglio
pseudo-classe
Aumentano le dimensioni dell'immagine mirata, viene visualizzato il pulsante Chiudi e il pulsante Espandi viene nascosto.
.img: target height: 450px; larghezza: 500 px; .img: target + .close display: block; .img: target + .close + .expand display: none;
Come funziona il pulsante Chiudi
Come il pulsante Chiudi è stato aggiunto come immagine di sfondo (Passo 2), ed è in realtà un tag con il
href = #
attributo (Passaggio 1), quando viene fatto clic, rimuove l'identificatore di frammento dalla fine dell'URI. Quindi anche rimuove il :bersaglio
pseudo-classe dall'immagine e dall'immagine torna alla sua dimensione precedente.
Ora l'effetto zoom-su-clic del solo CSS è fatto, controlla la demo qui sotto, o leggi un po 'di più sulla teoria che sta dietro le mappe immagine nella prossima sezione.
Informazioni di base: perché
e non
?
Ormai, sicuramente capisci che la cosa più importante per questa soluzione solo CSS è lavorare indirizzare l'immagine usando il href = "# imgid"
attributo, che potrebbe anche essere fatto usando il tag al posto della mappa immagine.
Questo può essere vero, comunque quando si tratta di immagini, usando il l'elemento è più appropriato. È ancora più importante quando vuoi lo zoom accada cliccando su un'area più grande sull'immagine piuttosto che solo sull'icona Espandi,
ti dà una soluzione facile.
Il predefinito
valore per forma
attributo crea a area rettangolare collegabile che copre l'intera immagine. Se dovessi usare invece, dovresti codificarlo per coprire l'immagine, e potresti anche dover usare un elemento wrapper per lo stesso scopo.
Per parlare anche degli avvertimenti di questa soluzione, il pointer-events
La proprietà CSS (utilizzata nel passaggio 2) è supportata da Internet Explorer solo dalla versione 11.
Per supportare i browser IE prima di questo, potresti volerli utilizzare invece di
, oppure ingrandire l'immagine facendo clic in qualsiasi punto (in questo caso non sarà necessario per l'icona Espandi).