Як створити чистий ефект CSS onClick Image Zoom

У CSS немає псевдокласа події кліків націлювання, і це є одним з найбільші болючі точки розробників інтерфейсу. Найближчим псевдо-класом є : active який стилює елемент за період часу, коли користувач натискає на нього мишкою.

Проте цей ефект недовговічний: коли користувач відпускає мишу, : active більше не працює. Ми повинні знайти інший спосіб емулювати подію кліків у CSS.

Цей пост був написаний у відповідь на запит читача, і він буде пояснювати, як це зробити націлюйте подію кліку на чистий CSS у конкретному випадку використання, масштабування зображення.

Ви можете побачити кінцевий результат нижче - рішення для CSS Збільшення зображення на клік.

Коли потрібно використовувати рішення лише для CSS

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

Для власне Галерея, JavaScript забезпечує більшу гнучкість і ефективність.

Передні кінцеві методи ми будемо використовувати

Тепер, коли ви були попереджені, давайте швидко переглянемо 3 ключові методи ми будемо використовувати:

1. The Тег HTML що дозволяє браузерам створювати зв'язані області над зображенням. Докладніше про елемент у моїй попередній публікації.
2. The usemap атрибут тег, що підключає зображення до карти зображення.
3. The : target Псевдоклас CSS що представляє елемент, націлений за допомогою селектора ідентифікаторів.

1. Створіть HTML-базу

По-перше, створимо базу HTML. У наведеному нижче коді ми додаємо зображення, яке потрібно збільшити і розгорнути & значки закрити кнопки для збільшення та зменшення масштабу.

Важливо мати ідентифікатор на зображенні, яке потрібно збільшити, а кнопка "Закрити" повинна бути посиланням із зображенням href = "#" атрибут, я поясню чому пізніше в пості.

2. Додайте CSS

Спочатку піктограму Закрити не повинні відображатися. The позиції, маржа-, зліва, і знизу властивості місце Розкрийте та закрийте піктограми де ми хочемо, щоб вони були - у верхньому правому куті зображення.

The покажчик-події: немає; правило дозволяє миші подій пройти через піктограму 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. Додати карту зображень

На карті зображення клікабельна область має бути у верхньому правому куті зображення безпосередньо під піктограмою "Розгорнути" та його розміром. Помістіть елемент перед першим в HTML. Ми будемо прив'язувати зображення до карти на наступному етапі.

У блоці коду вище, визначає тег форма, розмір і URI області зв'язку всередині карти зображення. Для прямокутної форми, форми атрибут приймає rect значення, і чотири значення з шнури атрибут представляють відстань у пікселях між:

1. лівий край зображення & лівий край області посилання
2. верхній край зображення & верхній край області посилання
3. лівий край зображення & правий край області зв'язку
4. верхній край зображення & нижній край області зв'язку

Значення href атрибут повинен бути хеш-ідентифікатор зображення (тому зображення повинно мати id).

4. Прив'яжіть зображення до карти зображення

Додати usemap атрибут зображення так, щоб до прив'яжіть його до карти зображення. Його значення має бути хеш-репрезентація ім'я атрибут тег ми додали на кроці 3.

Тепер можна натиснути на ділянку карти зображення лежить за кнопкою Expand. Коли користувач натискає кнопку "Розгорнути", це реальна кліка, яка натискається, - пам'ятайте, що ми зробили кнопку "Розгорнути" “прохідний” з покажчик-події: немає; правило на кроці 2.

Таким чином користувач націлюється на зображення натиснувши на неї, і після клацання URI стає суфіксованим з "# img1" ідентифікатор фрагмента.

5. Стиль : target Псевдоклас

До "# img1" Ідентифікатор фрагмента знаходиться в кінці URI, цільове зображення може бути стилі з : target псевдоклас

Розміри цільового зображення збільшуються, відображається кнопка "Закрити", а кнопка "Розгорнути" приховується.

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

Як працює кнопка закриття

Як кнопка Закрити була додана як фонове зображення (Крок 2), і насправді є з тегом href = # атрибут (Крок 1), коли він натискається, він видаляє ідентифікатор фрагмента з кінця URI. Тому він також видаляє : target псевдоклас зображення, а також зображення повертається до попереднього розміру.

Довідкова інформація: Чому і ні ?

До теперішнього часу ви, безумовно, розумієте, що найважливіше для роботи з цим CSS-рішенням є націлювати на зображення за допомогою href = "# imgid" атрибут, що також можна зробити за допомогою замість карти зображення.

The за замовчуванням значення для форми атрибут створює a прямокутна зв'язуюча область, що охоплює все зображення. Якщо ви повинні були використовувати замість цього вам доведеться кодувати його, щоб покрити зображення, і ви можете також використовувати елемент обгортки для тієї ж мети.

Щоб підтримувати веб-переглядачі IE, можна скористатися ними замість , або збільште зображення, натиснувши будь-яке місце на ньому (у цьому випадку не потрібно буде використовувати значок "Розгорнути").