To tehniko JavaScript je mogoče uporabiti za številne učinke, vključno z opisi orodij in slikovnimi zemljevidi.

Interaktivna spletna mesta lahko uporabnikom zagotovijo bolj privlačno izkušnjo. Spletno mesto lahko naredite bolj interaktivno na več načinov, kot je dodajanje animacij, namigov orodij ali drugih dodatnih učinkov.

Nekatera spletna mesta prikažejo informacije tudi, ko se uporabnik premakne nad element na strani. To vključuje zemljevide ali druge vizualne podatke, ki uporabniku omogočajo, da s kazalcem miške premakne nad sliko in si ogleda podatkovno točko z uporabo namiga orodja.

Ta učinek lahko dosežete z uporabo HTML, CSS in JavaScript z uporabo določenih tehnik CSS in konceptov JavaScript DOM.

Slike so lahko koristen način za posredovanje informacij na vizualno privlačen način na spletni strani. Uporabni so tudi za dodajanje drugih privlačnih učinkov, kot je a preprosta galerija slik.

S CSS in JavaScript lahko nad sliko v HTML dodate namig za orodje.

Koda, uporabljena v tem projektu, je na voljo tukaj GitHub repo pod licenco MIT.

instagram viewer
  1. V novo datoteko z imenom index.html dodajte osnovno strukturo datoteke HTML:
    html>
    <html>
    <glavo>
    <naslov>Primer namiga za slikonaslov>
    glavo>
    <telo>
    telo>
    html>
  2. Znotraj oznake body dodajte vsebnik div. Ta div bo vključeval sliko in elemente orodnih namigov:
    <divrazred="posoda">
    div>
  3. Znotraj vsebnika dodajte sliko. Prepričajte se, da je slika z ujemajočim se imenom datoteke v isti mapi kot vaša datoteka HTML:
    <imgsrc="slika.jpg"razred="slika"višina="420"premer="840"alt="Vaša slika">
  4. Pod sliko dodajte div, ki predstavlja opis orodja:
    <divrazred="tooltip">div>
  5. V oznaki glave dodajte oznako sloga. Znotraj oznake sloga dodajte nekaj sloga za vsebnik slik in opis orodja:
    <stil>
    .posoda {
    položaj: relativno;
    zaslon: inline-block;
     }

    .tooltip {
    položaj: absolutno;
    levo: 0;
    zaslon: nič;
    oblazinjenje: 5px;
    Barva ozadja: #000;
    barva: #fff;
    velikost pisave: 12px;
     }
    stil>
  6. Ustvarite novo oznako skripta na dnu oznake body:
    <telo>
     Vsebina vaše spletne strani tukaj 
    <scenarij>
    scenarij>
    telo>
  7. Znotraj oznake skripta, uporabite izbirnik DOM funkcijo, querySelector, da dobite elemente HTML slike in opis orodja:
    konst slika = dokument.querySelector('.image');
    konst opis orodja = dokument.querySelector('.tooltip');
  8. Dodajte poslušalca dogodkov za miška dogodek. Ta funkcija se zažene, ko z miško premaknete nad sliko. Ko se to zgodi, se na zaslonu prikaže opis orodja:
    image.addEventListener('mouseover', () => {
     tooltip.style.display = 'blok';
    });
  9. Dodajte poslušalca dogodkov za mouseout dogodek. Ta funkcija se bo zagnala, ko miška zapusti sliko. Ko se to zgodi, bo opis orodja izginil z zaslona:
    image.addEventListener('mouseout', () => {
     tooltip.style.display = 'brez';
    });
  10. Odprite datoteko index.html v katerem koli brskalniku in premaknite miškin kazalec nad sliko, da si ogledate opis orodja:

Kako izračunati in prikazati X in Y slikovne koordinate slike

Zdaj, ko je namig orodja viden na strani, spremenite njegov položaj in besedilo, da prikažete koordinate X in Y miške.

  1. Spremenite slog CSS za opis orodja, tako da opis orodja ni viden, preden miškin kazalec premaknete nad sliko. To vam preprečuje, da bi videli opis orodja na dnu slike, preden skočite na lokacijo kazalca:
    .tooltip {
    položaj: absolutno;
    vrh: -30 slikovnih pik;
    levo: 0;
    zaslon: nič;
    oblazinjenje: 5px;
    Barva ozadja: #000;
    barva: #fff;
    velikost pisave: 12px;
    }
  2. Znotraj oznake skripta dodajte drugega poslušalca dogodkov, da poslušate mousemove dogodek. Ta funkcija se bo neprekinjeno izvajala vsakič, ko se z miško pomaknete nad novo slikovno piko. Dodajte parameter dogodka, ki bo vnesel informacije o mousemove dogodek v funkcijo. Te informacije vključujejo koordinate slike, kjer je miška na tej točki:
    image.addEventListener('mousemove', (e) => {
    });
  3. Z dogodkom spremenite vodoravni položaj opisa orodja z levo lastnostjo CSS. Vsakič, ko se miška premakne, bo to posodobilo vrednost, da se bo ujemala s koordinatami X kazalca, shranjenimi v odjemalecX spremenljivka:
    tooltip.style.left = e.clientX + 'px';
  4. Spremenite navpični položaj opisa orodja z uporabo zgornje lastnosti CSS. ClientY predstavlja y koordinate miške. The offsetHeight lastnost vključuje morebitne dodatne obrobe ali obrobe znotraj opisa orodja. Ker ne želite, da je opis orodja neposredno tam, kjer je kazalec, lahko s položaja odstranite dodatnih 10 slikovnih pik:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Spremenite besedilno vsebino namiga za prikaz koordinat:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Odprite datoteko index.html v katerem koli brskalniku in premaknite miškin kazalec nad sliko, da si ogledate posodobljen opis orodja:

Dodajanje učinkov na vašo interaktivno spletno stran

Zdaj razumete, kako dodati interaktivni opis orodja nad sliko na vaši spletni strani. Svoje znanje HTML in CSS lahko še naprej izboljšujete tako, da eksperimentirate z drugimi zanimivimi učinki HTML.