Как да създадете чист CSS onClick ефект на мащабиране на изображението

CSS няма псевдоклас за събития с кликвания за насочване, и това представлява един от най-големи болки на разработчиците от предния край. Най-близкият псевдоклас е :активен който стилизира елемент за времето, през което потребителят натиска мишката върху него.

Този ефект обаче е краткотраен: след като потребителят пусне мишката, :активен вече не работи. Трябва да намерим друг начин емулиране на събитие при щракване в CSS.

Тази публикация е написана в отговор на искане на читателя и ще обясни как да го направите насочете събитие за кликване с чист CSS в конкретен случай на употреба, увеличение на изображението.

Можете да видите крайния резултат по-долу - само за CSS решение увеличение на изображението при кликване.

Кога да използвате само CSS-решението

Преди да продължа, искам да кажа, че за мащабиране на изображението препоръчвам само метода CSS (който променя размерите на изображението), само когато искате единичен или a група от няколко изображения за да имате функцията за увеличение.

За правилен галерия, JavaScript осигурява по-голяма гъвкавост и ефективност.

Техники на предния край ще използваме

Сега, след като сте били предупредени, нека бързо да прегледаме 3 основни техники ще използваме:

1. Най- HTML етикет което позволява на браузърите да създаване на свързващи се области над изображение. Прочетете повече за елемент в предишния ми пост.
2. Най- usemap атрибут на свободен край, който свързва изображението към картата на изображението.
3. Най- :мишена CSS псевдоклас който представлява елемент, който е бил насочен, използвайки своя ИД селектор.

1. Създайте HTML базата

Първо, нека създадем HTML базата. В кода по-долу добавяме изображение, което да се увеличи и разшири & икони на бутони за затваряне за увеличаване и намаляване на мащаба.

Важно е да имате идентификатор на изображението, което искате да увеличите, а бутонът Затвори трябва да е връзка, която има HREF = "#" атрибут, ще обясня защо по-късно в публикацията.

2. Добавете CSS

Първоначално иконата за затваряне не трябва да се показва. Най- позиция, марж-, наляво, и дъно Имоти място на Разгънете и затворете иконите където искаме те да бъдат - в горния десен ъгъл на изображението.

Най- показатели: няма; Правилото позволява на мишките събития да преминете през иконата Expand и стигнете до изображението.

 .img височина: 150px; ширина: 200px;  .close background-image: url ("Close-icon.png"); фон-повторение: не се повтаря; дъно: 418px; дисплей: няма; височина: 32px; наляво: 462px; margin-top: -32px; позиция: относителна; ширина: 32px;  .expand bottom: 125px; margin-left: -32px; margin-right: 16px; показатели: няма; позиция: относителна;  

3. Добавете Карта на изображението

На картата на изображението зона за кликване би трябвало в горния десен ъгъл на изображението под иконата Expand и за неговия размер. Поставете елемент преди първия в HTML. Ще свържем изображението с картата в следващата стъпка.

В блока с кодове по-горе определя като форма, размер и URI на свързана област вътре в картата на изображението. За правоъгълна форма, на форма атрибута приема на правоъгълник стойност, и четири стойности от coords атрибут представлява разстоянието в пиксели между:

1. левия край на изображението и левия край на областта на връзката
2. горния край на изображението и горния край на областта за връзка
3. левия край на изображението и десния край на областта на връзката
4. горния край на изображението и долния край на областта на връзката

Стойността на HREF атрибутът трябва да бъде хеш идентификатор на изображението (Ето защо изображението трябва да има документ за самоличност).

4. Свържете изображението с Картата на изображението

Добавете usemap атрибут на изображението, така че да го свържете с картата на изображението. Неговата стойност трябва да бъде хеш представяне на име атрибут на свободен край добавихме в стъпка 3.

Сега може да се кликне върху картата на изображението се намира зад бутона Разгъване. Когато потребителят кликне върху бутона „Разгъване“, това е зоната за кликване, която се кликва в действителност - не забравяйте, че направихме бутона „Разширяване“. “проходим” с показатели: няма; правило в Стъпка 2.

По този начин потребителят насочва към самото изображение като щракнете върху него и след кликване URI се поставя със суфикс с "# Img1" идентификатор на фрагмент.

5. Стил на :мишена Псевдо-Class

Докато "# Img1" Идентификаторът на фрагмента е в края на URI, целевото изображение може да бъде оформена с :мишена псевдо-клас

Размерите на насоченото изображение се увеличават, показва се бутонът Затваряне, а бутонът Разгъване се скрива.

 .img: target височина: 450px; ширина: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Как работи бутонът за затваряне

Тъй като бутона за затваряне е добавен като фоново изображение (стъпка 2), и всъщност е с етикет HREF = # атрибут (Стъпка 1), когато се натисне, той премахва идентификатора на фрагмента от края на URI. Затова и тя премахва :мишена псевдо-клас от изображението и изображението се връща към предишния си размер.

Основна информация: Защо и не ?

До сега вие със сигурност разбирате, че най-важното нещо за това CSS-единствено решение за работа е да насочете изображението с помощта на HREF = "# imgid" атрибут, което също може да се направи с помощта на вместо карта с изображения.

Най- по подразбиране стойност за форма атрибут създава a правоъгълна връзка, която покрива цялото изображение. Ако използвате вместо това трябва да го кодирате, за да покриете изображението, и може да се наложи да използвате и обвиващ елемент за същата цел.

За да поддържате IE браузъри преди това, може да искате да използвате и двете вместо , или да увеличите изображението, като кликнете някъде върху него (в този случай няма да има нужда от иконата за разгъване).