Како прекрити Кс и И координате на слику користећи ЈаваСцрипт

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

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

Овај ефекат можете постићи користећи ХТМЛ, ЦСС и ЈаваСцрипт користећи одређене ЦСС технике и ЈаваСцрипт ДОМ концепте.

Слике могу бити користан начин за преношење информација на визуелно привлачан начин на веб страници. Такође су корисни за додавање других занимљивих ефеката као што је а једноставна галерија слика.

Можете додати опис алата преко слике у ХТМЛ-у користећи ЦСС и ЈаваСцрипт.

Код коришћен у овом пројекту доступан је у овом ГитХуб репо под лиценцом МИТ-а.

1. У нову датотеку која се зове индек.хтмл, додајте основну структуру ХТМЛ датотеке:

   хтмл>
   <хтмл>
   <глава>
   <наслов>Пример алатке за сликунаслов>
   глава>
   <тело>
   тело>
   хтмл>

2. Унутар ознаке тела додајте див контејнер. Овај див ће укључивати и слику и елементе описа алата:

   <дивкласа="контејнер">
   див>

3. Унутар контејнера додајте слику. Уверите се да је слика са одговарајућим именом датотеке у истој фасцикли као и ваша ХТМЛ датотека:

   <имгсрц="имаге.јпг"класа="слика"висина="420"ширина="840"алт="Ваша слика">

4. Испод слике додајте див који представља опис алата:

   <дивкласа="опис алата">див>

5. У ознаку хеад додајте ознаку стила. Унутар ознаке стила додајте мало стила за контејнер за слику и опис алата:

   <стил>
   .контејнер {
   положај: релативан;
   приказ: инлине-блоцк;
    }
   
   .тоолтип {
   положај: апсолутни;
   лево: 0;
   приказ: ниједан;
   паддинг: 5пк;
   боја позадине: #000;
   боја: #ффф;
   фонт-сизе: 12пк;
    }
   стил>

6. Направите нову ознаку скрипте на дну ознаке тела:

   <тело>
    Садржај ваше веб странице овде 
   <скрипта>
   скрипта>
   тело>

7. Унутар ознаке скрипте, користите ДОМ селектор функција, куериСелецтор, да бисте добили ХТМЛ елементе слике и опис алата:

   конст слика = документ.куериСелецтор('.слика');
   конст тоолтип = документ.куериСелецтор('.тоолтип');

8. Додајте слушаоца догађаја за Миша преко догађај. Ова функција ће се покренути када пређете мишем преко слике. Када се то догоди, на екрану ће се приказати објашњење:

   имаге.аддЕвентЛистенер('Миша преко', () => {
    тоолтип.стиле.дисплаи = 'блокирати';
   });

9. Додајте слушаоца догађаја за моусеоут догађај. Ова функција ће се покренути када миш напусти слику. Када се то догоди, опис алатке ће нестати са екрана:

   имаге.аддЕвентЛистенер('моусеоут', () => {
    тоолтип.стиле.дисплаи = 'ниједан';
   });

10. Отворите датотеку индек.хтмл у било ком прегледачу и пређите курсором преко слике да бисте видели објашњење:

Како израчунати и приказати координате Кс и И пиксела слике

Сада када је опис алата видљив на страници, промените његову позицију и текст да бисте приказали Кс и И координате миша.

1. Промените ЦСС стил описа, тако да опис алатке није видљив пре него што пређете мишем преко слике. Ово вас спречава да видите опис алатке на дну слике пре него што скочите на локацију курсора:

   .тоолтип {
   положај: апсолутни;
   топ: -30пк;
   лево: 0;
   приказ: ниједан;
   паддинг: 5пк;
   боја позадине: #000;
   боја: #ффф;
   фонт-сизе: 12пк;
   }

2. Унутар ознаке скрипте додајте још један слушалац догађаја да бисте слушали моусемове догађај. Ова функција ће се извршавати непрекидно сваки пут када миш пређе преко новог пиксела. Додајте параметар догађаја који ће унети информације о моусемове догађај у функцију. Ове информације укључују координате слике где се миш налази у тој тачки:

   имаге.аддЕвентЛистенер('моусемове', (е) => {
   });

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

   тоолтип.стиле.лефт = е.цлиентКс + 'пк';

4. Промените вертикалну позицију описа алатке користећи ЦСС својство на врху. ЦлиентИ представља и координате миша. Тхе оффсетХеигхт својство укључује све додатне додатке или ивице унутар описа алата. Пошто не желите да се прикаже алатка директно тамо где је курсор, можете уклонити додатних 10 пиксела са позиције:

   тоолтип.стиле.топ = е.цлиентИ - тоолтип.оффсетХеигхт - 10 + 'пк';

5. Промените текстуални садржај описа да бисте приказали координате:

   тоолтип.тектЦонтент = `Кс: ${е.оффсетКс}, И: ${е.оффсетИ}`;

6. Отворите датотеку индек.хтмл у било ком прегледачу и пређите курсором преко слике да бисте видели ажурирани опис алатке:

Додавање ефеката вашој интерактивној веб страници

Сада разумете како да додате интерактивни опис преко слике на вашој веб страници. Можете наставити да унапређујете своје ХТМЛ и ЦСС вештине експериментисањем са другим занимљивим ХТМЛ ефектима.