Како створити чист ЦСС онЦлицк Имаге Зоом Еффецт

ЦСС нема псеудоклас за догађаји клика на циљање, и то представља једну од највеће болне тачке фронт-енд програмера. Најближа псеудо-класа је : ацтиве која стилизује елемент за период када корисник притисне миш преко њега.

Овај ефекат је, међутим, краткотрајан: када корисник ослободи миша, : ацтиве више не ради. Морамо наћи неки други начин емулирати догађај кликања у ЦСС-у.

Овај пост је написан као одговор на захтјев читалаца и он ће објаснити како циљајте догађај кликова са чистим ЦСС-ом у конкретном случају употребе, зумирање слике.

Коначни резултат можете видети испод - ЦСС-само решење за зумирање слике на клик.

Када користити решење само за ЦСС

Пре него што наставим, желим да кажем да за зумирање слике препоручујем методу која је само за ЦСС (која мења димензије слике), само када желите једно или а група од неколико слика да бисте имали функцију зумирања.

За право галерија, ЈаваСцрипт пружа већу флексибилност и ефикасност.

Фронт-Енд технике које ћемо користити

Сада када су вас упозорили, хајде да брзо погледамо 3 кључне технике користићемо:

1. Тхе ХТМЛ таг који омогућава прегледачима да креирајте повезиве области преко слике. Прочитајте више о елемент у мом ранијем посту.
2. Тхе усемап атрибут таг, која повезује слику са сликом.
3. Тхе : таргет ЦСС псеудо-класа која представља елемент који је циљан помоћу његовог ИД селектора.

1. Креирајте ХТМЛ базу

Прво, направимо ХТМЛ базу. У доњем коду додајемо слику коју желите зумирати и проширити & иконе затварања тастера за зумирање и смањивање.

Важно је да имате ИД на слици за зумирање, а дугме Цлосе треба да буде линк који има хреф = "#" атрибут, објаснићу зашто касније у посту.

2. Додајте ЦСС

У почетку, икона Затвори не би требало да се приказује. Тхе позицију, маргин-, лево, и дно својства мјесто тхе Прошири и затвори иконе где желимо да буду - у горњем десном углу слике.

Тхе поинтер-догађаји: ниједан; правило дозвољава да се догађаји миша прођите кроз икону Екпанд и доћи до слике.

 .имг хеигхт: 150пк; видтх: 200пк;  .цлосе бацкгроунд-имаге: урл ("Цлосе-ицон.пнг"); позадина-понављање: нема понављања; боттом: 418пк; дисплаи: ноне; хеигхт: 32пк; лево: 462пк; маргин: -32пк; позиција: релативна; видтх: 32пк;  .екпанд боттом: 125пк; маргин-лефт: -32пк; маргин-ригхт: 16пк; поинтер-догађаји: ниједан; позиција: релативна;  

3. Додајте мапу са сликама

На мапи са сликама, цлицкабле ареа требало би у горњем десном углу слике одмах испод иконе Екпанд и њене величине. Поставите пре првог у ХТМЛ-у. Везацемо слику на мапу у следецем кораку.

У кодном блоку изнад, таг дефинише облик, величину и УРИ подручја повезивања унутар мапе са сликама. За правоугаони облик, тхе облик аттрибуте такес тхе рецт вредност, и четири вредности од цоордс атрибут представља удаљеност у пикселима између:

1. лева ивица слике и лева ивица области везе
2. горњу ивицу слике и горњу ивицу области везе
3. лева ивица слике и десна ивица области везе
4. горњи руб слике и доњи руб области везе

Вредност хреф атрибут мора бити хасх идентификатор слике (зато би слика требала имати ид).

4. Повежите слику са мапом слике

Додајте усемап атрибут за слику тако да вежите са мапом слике. Његова вредност мора бити хасх репрезентација име атрибут таг додали смо у 3. кораку.

Сада је могуће кликнути на мапу слике налази се иза дугмета Екпанд. Када корисник кликне на дугме „Прошири“, то је област која се може кликнути и која је у стварности кликнута - запамтите да смо направили дугме „Прошири“. “пассабле” са поинтер-догађаји: ниједан; правило у кораку 2.

На овај начин корисник циља саму слику тако што ћете кликнути на њега, а након клика УРИ ће добити суфикс са "# имг1" идентификатор фрагмента.

5. Стил : таргет Псеудо-класа

Док "# имг1" идентификатор фрагмента је на крају УРИ-ја, циљана слика може бити стилизован са : таргет псеудо-класа

Повећавају се димензије циљане слике, приказује се гумб Затвори, а гумб Прошири се скрива.

 .имг: таргет хеигхт: 450пк; видтх: 500пк;  .имг: таргет + .цлосе дисплаи: блоцк;  .имг: таргет + .цлосе + .екпанд дисплаи: ноне;  

Како функционише Цлосе Буттон

Како је дугме Цлосе (Затвори) додато као позадинска слика (корак 2), и заправо је са ознаком хреф = # атрибут (корак 1), када се кликне, уклања идентификатор фрагмента са краја УРИ-ја. Стога и она уклања : таргет псеудо-класа са слике и слике враћа се на претходну величину.

Основне информације: Зашто и не ?

До сада сте сигурно схватили да је најважнија ствар за ово ЦСС-једино рјешење за посао циљајте слику помоћу хреф = "# имгид" аттрибуте, што се такође може урадити коришћењем уместо мапе са сликама.

Тхе Уобичајено валуе фор облик атрибут ствара а правоугаона веза која покрива целу слику. Ако желите да користите Уместо тога, морат ћете га кодирати да бисте покрили слику, а можда ћете морати користити и елемент омотача за исту сврху.

Да бисте подржали ИЕ претраживаче пре тога, можда ћете желети да га користите уместо , или увећајте слику тако што ћете кликнути било где на њој (у овом случају неће бити потребе за иконом Прошири).