Tätä JavaScript-tekniikkaa voidaan käyttää moniin tehosteisiin, mukaan lukien työkaluvihjeet ja kuvakartat.

Interaktiiviset verkkosivustot voivat tarjota käyttäjille kiinnostavamman kokemuksen. Voit tehdä verkkosivustosta interaktiivisemman monilla tavoilla, kuten lisäämällä animaatioita, työkaluvihjeitä tai muita lisätehosteita.

Jotkut verkkosivustot näyttävät myös tietoja, kun käyttäjä vie hiiren osoittimen sivulla olevan elementin päälle. Tämä sisältää karttoja tai muita visuaalisia tietoja, joiden avulla käyttäjä voi viedä hiiren kuvan päälle ja tarkastella datapistettä työkaluvihjeen avulla.

Voit saavuttaa tämän vaikutuksen käyttämällä HTML: ää, CSS: ää ja JavaScriptiä käyttämällä tiettyjä CSS-tekniikoita ja JavaScriptin DOM-konsepteja.

Kuvat voivat olla hyödyllinen tapa välittää tietoa visuaalisesti houkuttelevalla tavalla verkkosivulla. Ne ovat hyödyllisiä myös muiden kiinnostavien tehosteiden, kuten a yksinkertainen kuvagalleria.

Voit lisätä työkaluvihjeen HTML-kuvan päälle CSS: n ja JavaScriptin avulla.

instagram viewer

Tässä projektissa käytetty koodi on saatavilla tästä GitHub repo MIT-lisenssillä.

  1. Lisää uuteen tiedostoon index.html HTML-tiedoston perusrakenne:
    html>
    <html>
    <pää>
    <otsikko>Kuvatyökaluvihjeesimerkkiotsikko>
    pää>
    <kehon>
    kehon>
    html>
  2. Lisää body-tagin sisään säilön div. Tämä div sisältää sekä kuvan että työkaluvihje-elementit:
    <divluokkaa="kontti">
    div>
  3. Lisää säilön sisälle kuva. Varmista, että kuva, jolla on vastaava tiedostonimi, on samassa kansiossa kuin HTML-tiedostosi:
    <imgsrc="kuva.jpg"luokkaa="kuva"korkeus="420"leveys="840"alt="Sinun kuvasi">
  4. Lisää kuvan alle div, joka edustaa työkaluvihjettä:
    <divluokkaa="työkaluvinkki">div>
  5. Lisää head-tunnisteeseen tyylitunniste. Lisää tyylitunnisteen sisään tyyliä kuvasäiliöön ja työkaluvihjeeseen:
    <tyyli>
    .container {
    asema: suhteellinen;
    näyttö: inline-lohko;
     }

    .työkaluvinkki {
    asema: ehdoton;
    vasemmalle: 0;
    näyttö: ei mitään;
    pehmuste: 5px;
    taustaväri: #000;
    väri: #F F F;
    Fonttikoko: 12px;
     }
    tyyli>
  6. Luo uusi komentosarjatunniste body-tagin alaosaan:
    <kehon>
     Verkkosivusi sisältö täällä 
    <käsikirjoitus>
    käsikirjoitus>
    kehon>
  7. Käsikirjoitustunnisteen sisällä käytä DOM-valitsinta funktio, querySelector, saadaksesi kuvan ja työkaluvihjeen HTML-elementit:
    konst kuva = asiakirja.querySelector('.kuva');
    konst työkaluvinkki = asiakirja.querySelector(".työkaluvinkki");
  8. Lisää tapahtuman kuuntelija hiiren osoitin tapahtuma. Tämä toiminto toimii, kun viet hiiren osoittimen kuvan päälle. Kun näin tapahtuu, työkaluvihje tulee näkyviin näytölle:
    image.addEventListener("mouseover", () => {
     tooltip.style.display = 'lohko';
    });
  9. Lisää tapahtuman kuuntelija hiiri pois tapahtuma. Tämä toiminto toimii, kun hiiri poistuu kuvasta. Kun näin tapahtuu, työkaluvihje katoaa näytöltä:
    image.addEventListener('hiiri', () => {
     tooltip.style.display = 'ei mitään';
    });
  10. Avaa index.html-tiedosto missä tahansa selaimessa ja vie hiiri kuvan päälle nähdäksesi työkaluvihjeen:

Kuinka laskea ja näyttää kuvan X- ja Y-pikselikoordinaatit

Nyt kun työkaluvihje on näkyvissä sivulla, muuta sen sijaintia ja tekstiä näyttääksesi hiiren X- ja Y-koordinaatit.

  1. Muuta työkaluvihjeen CSS-tyyliä, jotta työkaluvihje ei ole näkyvissä ennen kuin viet hiiren osoittimen kuvan päälle. Tämä estää sinua näkemästä työkaluvihjettä kuvan alareunassa ennen kuin siirryt kohdistimen sijaintiin:
    .työkaluvinkki {
    asema: ehdoton;
    alkuun: -30 kuvapistettä;
    vasemmalle: 0;
    näyttö: ei mitään;
    pehmuste: 5px;
    taustaväri: #000;
    väri: #F F F;
    Fonttikoko: 12px;
    }
  2. Lisää komentosarjatunnisteen sisällä toinen tapahtumaseuraaja, jotta voit kuunnella hiiren siirto tapahtuma. Tämä toiminto suoritetaan jatkuvasti aina, kun hiiri vie hiiren uuden pikselin päälle. Lisää tapahtumaparametri, joka syöttää tiedot tapahtumasta hiiren siirto tapahtuma toimintoon. Nämä tiedot sisältävät kuvan koordinaatit, missä hiiri on kyseisessä kohdassa:
    image.addEventListener('mousemove', (e) => {
    });
  3. Muuta työkaluvihjeen vaakasuuntaista sijaintia tapahtuman avulla käyttämällä vasemmanpuoleista CSS-ominaisuutta. Aina kun hiiri liikkuu, tämä päivittää arvon vastaamaan kohdistimen X-koordinaatteja, jotka on tallennettu asiakasX muuttuja:
    tooltip.style.left = e.clientX + 'px';
  4. Muuta työkaluvihjeen pystysuoraa sijaintia CSS-ylimmän ominaisuuden avulla. ClientY edustaa hiiren y-koordinaatteja. The offsetHeight ominaisuus sisältää kaikki ylimääräiset pehmusteet tai reunat työkaluvihjeen sisällä. Koska et halua työkaluvihjettä suoraan kohdistimen kohdalle, voit poistaa paikasta vielä 10 kuvapistettä:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Muuta työkaluvihjeen tekstisisältöä näyttääksesi koordinaatit:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Avaa index.html-tiedosto missä tahansa selaimessa ja vie hiiri kuvan päälle nähdäksesi päivitetyn työkaluvihjeen:

Tehosteiden lisääminen interaktiiviselle verkkosivullesi

Nyt ymmärrät, kuinka voit lisätä interaktiivisen työkaluvinkin verkkosivullasi olevan kuvan päälle. Voit jatkaa HTML- ja CSS-taitosi kehittämistä kokeilemalla muita mielenkiintoisia HTML-tehosteita.