Šo JavaScript paņēmienu var izmantot daudziem efektiem, tostarp rīku padomiem un attēlu kartēm.

Interaktīvas vietnes var nodrošināt lietotājiem saistošāku pieredzi. Ir daudzi veidi, kā padarīt vietni interaktīvāku, piemēram, pievienojot animācijas, rīka padomus vai citus papildu efektus.

Dažas vietnes arī parāda informāciju, kad lietotājs virza kursoru virs lapas elementa. Tas ietver kartes vai citus vizuālos datus, kas ļauj lietotājam virzīt kursoru virs attēla, lai skatītu datu punktu, izmantojot rīka padomu.

Šo efektu var sasniegt, izmantojot HTML, CSS un JavaScript, izmantojot noteiktas CSS metodes un JavaScript DOM koncepcijas.

Attēli var būt noderīgs veids, kā tīmekļa lapā nodot informāciju vizuāli pievilcīgā veidā. Tie ir noderīgi arī citu saistošu efektu pievienošanai, piemēram, a vienkārša attēlu galerija.

Varat pievienot rīka padomu attēlam HTML valodā, izmantojot CSS un JavaScript.

Šajā projektā izmantotais kods ir pieejams šajā GitHub repo saskaņā ar MIT licenci.

  1. Jaunā failā ar nosaukumu index.html pievienojiet HTML faila pamatstruktūru: 
    html>
    <html>
    <galvu>
    <virsraksts>Attēla rīka padoma piemērsvirsraksts>
    galvu>
    <ķermeni>
    ķermeni>
    html>
  2. Pamatteksta taga iekšpusē pievienojiet konteinera div. Šajā divdaļā būs gan attēls, gan rīka padoma elementi:
    <divklasē="konteiners">
    div>
  3. Konteinera iekšpusē pievienojiet attēlu. Pārliecinieties, vai attēls ar atbilstošu faila nosaukumu atrodas tajā pašā mapē, kurā atrodas jūsu HTML fails:
    <imgsrc="attēls.jpg"klasē="attēls"augstums="420"platums="840"alt="Tavs attēls">
  4. Zem attēla pievienojiet div, lai attēlotu rīka padomu:
    <divklasē="rīka padoms">div>
  5. Galvenajā tagā pievienojiet stila atzīmi. Stila taga iekšpusē pievienojiet attēla konteinera un rīka padoma stilu.
    <stils>
    .konteiners {
    pozīciju: radinieks;
    displejs: iekļauts bloks;
     }

    .rīka padoms {
    pozīciju: absolūts;
    pa kreisi: 0;
    displejs: neviens;
    polsterējums: 5px;
    fona krāsa: #000;
    krāsa: #fff;
    fonta izmērs: 12px;
     }
    stils>
  6. Izveidojiet jaunu skripta tagu pamatteksta taga apakšā:
    <ķermeni>
     Jūsu tīmekļa lapas saturs šeit 
    <skripts>
    skripts>
    ķermeni>
  7. Skripta taga iekšpusē izmantojiet DOM atlasītāju funkciju querySelector, lai iegūtu attēla HTML elementus un rīka padomu:
    konst attēls = dokumentu.querySelector('.image');
    konst rīka padoms = dokumentu.querySelector('.tooltip');
  8. Pievienojiet notikumu klausītāju kursoru notikumu. Šī funkcija darbosies, novietojot peles kursoru virs attēla. Kad tas notiek, ekrānā tiks parādīts rīka padoms:
    image.addEventListener("virziet kursoru", () => {
     tooltip.style.display = 'bloķēt';
    });
  9. Pievienojiet notikumu klausītāju peles izslēgšana notikumu. Šī funkcija darbosies, kad pele atstāj attēlu. Kad tas notiek, rīka padoms pazudīs no ekrāna:
    image.addEventListener('mouseout', () => {
     tooltip.style.display = 'neviens';
    });
  10. Jebkurā pārlūkprogrammā atveriet failu index.html un virziet kursoru virs attēla, lai skatītu rīka padomu:

Kā aprēķināt un parādīt attēla X un Y pikseļu koordinātas

Tagad, kad rīka padoms ir redzams lapā, mainiet tā pozīciju un tekstu, lai parādītu peles X un Y koordinātas.

  1. Mainiet rīka padoma CSS stilu, lai rīka padoms nebūtu redzams, pirms virzāt kursoru virs attēla. Tas neļauj jums redzēt rīka padomu attēla apakšā, pirms pāriet uz kursora atrašanās vietu:
    .rīka padoms {
    pozīciju: absolūts;
    tops: -30 pikseļi;
    pa kreisi: 0;
    displejs: neviens;
    polsterējums: 5px;
    fona krāsa: #000;
    krāsa: #fff;
    fonta izmērs: 12px;
    }
  2. Skripta taga iekšpusē pievienojiet citu notikumu uztvērēju, lai noklausītos peli pārvietot notikumu. Šī funkcija darbosies nepārtraukti katru reizi, kad peles kursoru novietos virs jauna pikseļa. Pievienojiet notikuma parametru, kas ievadīs informāciju par peli pārvietot notikumu funkcijā. Šī informācija ietver attēla koordinātas, kur šajā vietā atrodas pele:
    image.addEventListener('mousemove', (e) => {
    });
  3. Izmantojot notikumu, mainiet rīka padoma horizontālo pozīciju, izmantojot kreiso CSS rekvizītu. Katru reizi, kad pele kustas, vērtība tiks atjaunināta, lai tā atbilstu kursora X koordinātām, kas saglabātas klientsX mainīgais:
    tooltip.style.left = e.clientX + 'px';
  4. Mainiet rīka padoma vertikālo pozīciju, izmantojot augšējo CSS rekvizītu. KLIENTS apzīmē peles y koordinātas. The nobīdesAugstums rekvizīts ietver jebkuru papildu polsterējumu vai apmales rīka padoma iekšpusē. Tā kā nevēlaties, lai rīka padoms būtu tieši tur, kur atrodas kursors, varat noņemt papildu 10 pikseļus no pozīcijas:
    tooltip.style.top = e.clientY — tooltip.offsetHeight — 10 + 'px';
  5. Mainiet rīka padoma teksta saturu, lai parādītu koordinātas:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Jebkurā pārlūkprogrammā atveriet failu index.html un virziet kursoru virs attēla, lai skatītu atjaunināto rīka padomu:

Efektu pievienošana savai interaktīvai vietnei

Tagad jūs saprotat, kā tīmekļa lapā attēlam pievienot interaktīvu rīka padomu. Varat turpināt uzlabot savas HTML un CSS prasmes, eksperimentējot ar citiem interesantiem HTML efektiem.