Táto technika JavaScriptu sa dá použiť na mnohé efekty vrátane popisov nástrojov a obrázkových máp.

Interaktívne webové stránky môžu používateľom poskytnúť pútavejší zážitok. Existuje mnoho spôsobov, ako môžete urobiť webovú stránku interaktívnejšou, napríklad pridaním animácií, popisov alebo iných extra efektov.

Niektoré webové stránky zobrazujú informácie aj vtedy, keď používateľ umiestni kurzor myši na prvok na stránke. Patria sem mapy alebo iné vizuálne údaje, ktoré používateľovi umožňujú umiestniť kurzor myši na obrázok a zobraziť údajový bod pomocou popisu.

Tento efekt môžete dosiahnuť pomocou HTML, CSS a JavaScript pomocou určitých techník CSS a konceptov JavaScript DOM.

Obrázky môžu byť užitočným spôsobom, ako sprostredkovať informácie na webovej stránke vizuálne príťažlivým spôsobom. Sú tiež užitočné na pridanie ďalších pútavých efektov, ako napr jednoduchá galéria obrázkov.

Na obrázok v HTML môžete pridať popis pomocou CSS a JavaScriptu.

Kód použitý v tomto projekte je dostupný v tomto Úložisko GitHub pod licenciou MIT.

instagram viewer
  1. Do nového súboru s názvom index.html pridajte základnú štruktúru súboru HTML:
    html>
    <html>
    <hlavu>
    <titul>Príklad popisu obrázkatitul>
    hlavu>
    <telo>
    telo>
    html>
  2. Do značky tela pridajte kontajner div. Tento div bude obsahovať prvky obrázka aj popisu:
    <divtrieda="kontajner">
    div>
  3. Vnútri kontajnera pridajte obrázok. Uistite sa, že obrázok so zhodným názvom súboru je v rovnakom priečinku ako váš súbor HTML:
    <imgsrc="obrazok.jpg"trieda="obrázok"výška="420"šírka="840"alt="Váš obrázok">
  4. Pod obrázok pridajte prvok div, ktorý bude predstavovať popis:
    <divtrieda="popis">div>
  5. Do značky hlavy pridajte značku štýlu. Do značky štýlu pridajte štýl pre kontajner obrázkov a popis:
    <štýl>
    .kontajner {
    pozíciu: príbuzný;
    displej: inline-blok;
     }

    .popis {
    pozíciu: absolútne;
    vľavo: 0;
    displej: žiadny;
    vypchávka: 5px;
    farba pozadia: #000;
    farba: #fff;
    veľkosť písma: 12px;
     }
    štýl>
  6. Vytvorte novú značku skriptu v spodnej časti značky body:
    <telo>
     Obsah vašej webovej stránky tu 
    <skript>
    skript>
    telo>
  7. Vo vnútri značky skriptu použite selektor DOM funkcia, querySelector, na získanie prvkov HTML obrázka a popisu:
    konšt obrázok = dokument.querySelector('.image');
    konšt popis = dokument.querySelector('.tooltip');
  8. Pridajte poslucháč udalostí pre prejdenie myšou udalosť. Táto funkcia sa spustí, keď podržíte kurzor myši nad obrázkom. Keď k tomu dôjde, na obrazovke sa zobrazí popis:
    image.addEventListener('mouseover', () => {
     tooltip.style.display = 'blok';
    });
  9. Pridajte poslucháč udalostí pre mouseout udalosť. Táto funkcia sa spustí, keď myš opustí obrázok. Keď k tomu dôjde, popis zmizne z obrazovky:
    image.addEventListener('mouseout', () => {
     tooltip.style.display = 'žiadny';
    });
  10. Otvorte súbor index.html v ľubovoľnom prehliadači a umiestnite kurzor myši na obrázok, aby sa zobrazil popis:

Ako vypočítať a zobraziť súradnice pixelov X a Y obrázku

Teraz, keď je na stránke viditeľný popis, zmeňte jeho polohu a text, aby sa zobrazili súradnice X a Y myši.

  1. Zmeňte štýl CSS popisu tak, aby popis nebol viditeľný predtým, ako umiestnite kurzor myši na obrázok. To vám bráni vidieť popis v spodnej časti obrázka pred prechodom na miesto kurzora:
    .popis {
    pozíciu: absolútne;
    top: -30 pixelov;
    vľavo: 0;
    displej: žiadny;
    vypchávka: 5px;
    farba pozadia: #000;
    farba: #fff;
    veľkosť písma: 12px;
    }
  2. Do značky skriptu pridajte ďalší poslucháč udalosti, ktorý bude počúvať pohyb myšou udalosť. Táto funkcia sa bude vykonávať nepretržite vždy, keď myšou prejdete na nový pixel. Pridajte parameter udalosti, ktorý zadá informácie o pohyb myšou udalosť do funkcie. Tieto informácie zahŕňajú súradnice obrázka, kde sa v danom bode nachádza myš:
    image.addEventListener('mousemove', (e) => {
    });
  3. Pomocou udalosti zmeňte vodorovnú polohu popisku pomocou ľavej vlastnosti CSS. Pri každom pohybe myši sa hodnota aktualizuje tak, aby zodpovedala súradniciam X kurzora uloženým v clientX premenná:
    tooltip.style.left = e.clientX + 'px';
  4. Zmeňte vertikálnu polohu popisku pomocou vlastnosti top CSS. ClientY predstavuje súradnice y myši. The offsetHeight vlastnosť zahŕňa všetky ďalšie výplne alebo okraje v popise. Keďže nechcete, aby bol popis priamo tam, kde je kurzor, môžete z pozície odstrániť ďalších 10 pixelov:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Zmeňte textový obsah popisku na zobrazenie súradníc:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Otvorte súbor index.html v ľubovoľnom prehliadači a umiestnite kurzor myši na obrázok, aby sa zobrazil aktualizovaný popis:

Pridanie efektov na vašu interaktívnu webovú stránku

Teraz už viete, ako pridať interaktívny popis na obrázok na vašej webovej stránke. Môžete pokračovať v zdokonaľovaní svojich zručností v HTML a CSS experimentovaním s ďalšími zaujímavými HTML efektmi.