Seda JavaScripti tehnikat saab kasutada paljude efektide, sealhulgas tööriistavihjete ja pildikaartide jaoks.

Interaktiivsed veebisaidid võivad pakkuda kasutajatele kaasahaaravamat kogemust. Veebisaidi interaktiivsemaks muutmiseks on mitmeid viise, näiteks animatsioonide, tööriistavihjete või muude lisaefektide lisamine.

Mõned veebisaidid kuvavad teavet ka siis, kui kasutaja hõljutab kursorit lehe elemendi kohal. See hõlmab kaarte või muid visuaalseid andmeid, mis võimaldavad kasutajal hõljutada kursorit pildi kohal, et kuvada kohtspikri abil andmepunkti.

Selle efekti saate saavutada HTML-i, CSS-i ja JavaScripti kasutades, kasutades teatud CSS-i tehnikaid ja JavaScripti DOM-i kontseptsioone.

Pildid võivad olla kasulikud viisid teabe edastamiseks veebilehel visuaalselt ahvatleval viisil. Need on kasulikud ka muude köitvate efektide lisamiseks, näiteks a lihtne pildigalerii.

Saate lisada HTML-i pildile kohtspikri, kasutades CSS-i ja JavaScripti.

Selles projektis kasutatav kood on saadaval selles GitHubi repo MIT litsentsi alusel.

instagram viewer
  1. Lisage uude faili nimega index.html HTML-faili põhistruktuur:
    html>
    <html>
    <pea>
    <pealkiri>Pildi tööriistavihje näidepealkiri>
    pea>
    <keha>
    keha>
    html>
  2. Lisage kehamärgendi sisse konteineri lahter. See jaotis sisaldab nii pilti kui ka kohtspikri elemente:
    <divklass="konteiner">
    div>
  3. Lisage konteinerisse pilt. Veenduge, et sobiva failinimega pilt oleks teie HTML-failiga samas kaustas:
    <imgsrc="pilt.jpg"klass="pilt"kõrgus="420"laius="840"alt="Sinu pilt">
  4. Lisage pildi alla kohtspikri tähistamiseks div:
    <divklass="tööriistavihje">div>
  5. Lisage peasildile stiilimärgend. Lisage stiilimärgendi sisse pildikonteineri ja kohtspikri jaoks mõni stiil.
    <stiilis>
    .konteiner {
    positsiooni: sugulane;
    kuva: inline-plokk;
     }

    .tööriistavihje {
    positsiooni: absoluutne;
    vasakule: 0;
    kuva: mitte ühtegi;
    polsterdus: 5px;
    taustavärv: #000;
    värvi: #fff;
    fondi suurus: 12px;
     }
    stiilis>
  6. Looge body-märgendi allosas uus skriptimärgend:
    <keha>
     Teie veebilehe sisu siin 
    <stsenaarium>
    stsenaarium>
    keha>
  7. Skriptimärgendi sees kasutage DOM-i valijat funktsioon querySelector, et saada pildi HTML-elemendid ja kohtspikker:
    konst pilt = dokument.querySelector('.image');
    konst tööriistavihje = dokument.querySelector(".tööriistavihje");
  8. Lisage sündmusekuulaja kursor üle sündmus. See funktsioon käivitub, kui hõljutate kursorit pildi kohal. Kui see juhtub, kuvatakse ekraanil kohtspikker:
    image.addEventListener('kursorit', () => {
     tooltip.style.display = 'blokeeri';
    });
  9. Lisage sündmusekuulaja hiire väljas sündmus. See funktsioon käivitub, kui hiir pildilt lahkub. Kui see juhtub, kaob kohtspikker ekraanilt.
    image.addEventListener('hiir', () => {
     tooltip.style.display = 'mitte ükski';
    });
  10. Avage fail index.html mis tahes brauseris ja hõljutage kursorit pildi kohal, et kuvada kohtspikker.

Kuidas arvutada ja kuvada pildi X- ja Y-pikslikoordinaate

Nüüd, kui kohtspikker on lehel nähtav, muutke selle asukohta ja teksti, et kuvada hiire X- ja Y-koordinaadid.

  1. Muutke kohtspikri CSS-stiili, nii et kohtspikker poleks nähtav enne, kui liigutate kursorit pildi kohal. See ei lase teil enne kursori asukohta hüppamist näha pildi allosas olevat kohtspikrit.
    .tööriistavihje {
    positsiooni: absoluutne;
    üleval: -30 pikslit;
    vasakule: 0;
    kuva: mitte ühtegi;
    polsterdus: 5px;
    taustavärv: #000;
    värvi: #fff;
    fondi suurus: 12px;
    }
  2. Lisage skriptimärgendi sisse veel üks sündmuste kuulaja, et kuulata hiire liigutamine sündmus. See funktsioon käivitub pidevalt iga kord, kui hiir liigub uue piksli kohal. Lisage sündmuse parameeter, mis sisestab teabe selle kohta hiire liigutamine sündmus funktsiooni. See teave sisaldab pildi koordinaate, kus hiir selles punktis asub:
    image.addEventListener('mousemove', (e) => {
    });
  3. Sündmuse abil muutke kohtspikri horisontaalset asendit, kasutades vasakpoolset CSS-i atribuuti. Iga kord, kui hiir liigub, värskendab see väärtust, et see vastaks kursori X-koordinaatidele, mis on salvestatud klientX muutuja:
    tooltip.style.left = e.clientX + 'px';
  4. Muutke kohtspikri vertikaalset asendit ülemise CSS-i atribuudi abil. ClientY tähistab hiire y-koordinaate. The offsetHeight atribuut sisaldab mis tahes täiendavat polsterdust või ääriseid kohtspikri sees. Kuna te ei soovi, et kohtspikker oleks otse kursori asukohas, saate kohast eemaldada veel 10 pikslit.
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Muutke kohtspikri tekstisisu, et kuvada koordinaadid:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Avage fail index.html mis tahes brauseris ja hõljutage kursorit pildi kohal, et näha värskendatud kohtspikrit.

Efektide lisamine oma interaktiivsele veebilehele

Nüüd saate aru, kuidas lisada oma veebilehel oleva pildi kohale interaktiivne tööriistaspikker. Saate jätkata oma HTML-i ja CSS-i oskuste arendamist, katsetades muid huvitavaid HTML-i efekte.