Ez a JavaScript technika számos effektushoz használható, beleértve az eszköztippeket és a képtérképeket.

Az interaktív webhelyek vonzóbb élményt nyújthatnak a felhasználók számára. Számos módja van annak, hogy egy webhelyet interaktívabbá tegye, például animációk, eszköztippek vagy egyéb extra effektusok hozzáadásával.

Egyes webhelyek akkor is megjelenítenek információkat, amikor a felhasználó az oldalon egy elem fölé viszi az egérmutatót. Ide tartoznak a térképek vagy más vizuális adatok, amelyek lehetővé teszik a felhasználó számára, hogy a kép fölé vigye az egérmutatót, hogy egy eszköztipp segítségével megtekinthesse az adatpontot.

Ezt a hatást HTML, CSS és JavaScript használatával érheti el bizonyos CSS technikák és JavaScript DOM-koncepciók használatával.

A képek hasznos módjai lehetnek az információk tetszetős közvetítésének egy weboldalon. Hasznosak más vonzó hatások hozzáadásához is, mint pl egyszerű képgaléria.

Elemleírást adhat hozzá egy HTML-beli képhez CSS és JavaScript használatával.

instagram viewer

A projektben használt kód itt érhető el GitHub repó MIT licence alapján.

  1. Az index.html nevű új fájlban adja hozzá a HTML-fájl alapvető szerkezetét:
    html>
    <html>
    <fej>
    <cím>Kép eszköztipp példacím>
    fej>
    <test>
    test>
    html>
  2. A törzscímkén belül adjon hozzá egy konténer div. Ez a div tartalmazza a képet és az elemleírás elemeit is:
    <divosztály="tartály">
    div>
  3. A tároló belsejében adjon hozzá egy képet. Győződjön meg arról, hogy egy megfelelő fájlnévvel rendelkező kép ugyanabban a mappában van, mint a HTML-fájl:
    <imgsrc="kép.jpg"osztály="kép"magasság="420"szélesség="840"alt="A képed">
  4. A kép alatt adjon hozzá egy div elemet az eszköztipp megjelenítéséhez:
    <divosztály="eszköztipp">div>
  5. A head címkében adjon hozzá egy stíluscímkét. A stíluscímkén belül adjon hozzá stílust a képtárolóhoz és az eszköztipphez:
    <stílus>
    .tartály {
    pozíció: relatív;
    kijelző: inline-blokk;
     }

    .eszköztipp {
    pozíció: abszolút;
    bal: 0;
    kijelző: egyik sem;
    párnázás: 5px;
    háttérszín: #000;
    szín: #fff;
    betűméret: 12px;
     }
    stílus>
  6. Hozzon létre egy új szkriptcímkét a body címke alján:
    <test>
     A weboldal tartalma itt 
    <forgatókönyv>
    forgatókönyv>
    test>
  7. A szkriptcímkén belül használja a DOM választót függvény, querySelector, a kép és az eszköztipp HTML-elemeinek lekéréséhez:
    const kép = dokumentum.querySelector('.kép');
    const tooltip = dokumentum.querySelector(".eszköztipp");
  8. Adjon hozzá eseményfigyelőt a egérmutatót esemény. Ez a funkció akkor fut, ha az egeret a kép fölé viszi. Amikor ez megtörténik, az eszköztipp jelenik meg a képernyőn:
    image.addEventListener('egeret', () => {
     tooltip.style.display = 'Blokk';
    });
  9. Adjon hozzá eseményfigyelőt a egérkihúzás esemény. Ez a funkció akkor fut, amikor az egér elhagyja a képet. Amikor ez megtörténik, az eszköztipp eltűnik a képernyőről:
    image.addEventListener('egér', () => {
     tooltip.style.display = 'egyik sem';
    });
  10. Nyissa meg az index.html fájlt bármely böngészőben, és vigye az egérmutatót a kép fölé az eszköztipp megtekintéséhez:

A kép X és Y pixel koordinátáinak kiszámítása és megjelenítése

Most, hogy az eszköztipp látható az oldalon, módosítsa a pozícióját és a szövegét, hogy megjelenítse az egér X és Y koordinátáit.

  1. Módosítsa az eszköztipp CSS-stílusát, hogy az eszköztipp ne legyen látható, mielőtt a kép fölé viszi az egérmutatót. Ez megakadályozza, hogy a kurzor helyére ugrás előtt lássa az elemleírást a kép alján:
    .eszköztipp {
    pozíció: abszolút;
    tetejére: -30 képpont;
    bal: 0;
    kijelző: egyik sem;
    párnázás: 5px;
    háttérszín: #000;
    szín: #fff;
    betűméret: 12px;
    }
  2. A szkriptcímkén belül adjon hozzá egy másik eseményfigyelőt, hogy figyelje a egérmozgatás esemény. Ez a funkció folyamatosan végrehajtódik minden alkalommal, amikor az egeret egy új pixel fölé viszi. Adja hozzá az esemény paramétert, amely információkat ad meg a egérmozgatás eseményt a funkcióba. Ez az információ tartalmazza a kép koordinátáit, ahol az egér ezen a ponton van:
    image.addEventListener('egérmozgás', (e) => {
    });
  3. Az esemény használatával módosítsa az eszköztipp vízszintes helyzetét a bal oldali CSS tulajdonság segítségével. Minden alkalommal, amikor az egér mozog, ez frissíti az értéket, hogy megfeleljen a kurzor X koordinátáinak. ügyfélX változó:
    tooltip.style.left = e.clientX + 'px';
  4. Módosítsa az eszköztipp függőleges helyzetét a felső CSS tulajdonság segítségével. ClientY az egér y koordinátáit jelenti. A offsetHeight tulajdonság tartalmaz minden további kitöltést vagy szegélyt az eszköztippen belül. Mivel nem szeretné, hogy az eszköztipp közvetlenül ott legyen, ahol a kurzor van, eltávolíthat további 10 képpontot a pozícióból:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Módosítsa az eszköztipp szöveges tartalmát a koordináták megjelenítéséhez:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Nyissa meg az index.html fájlt bármelyik böngészőben, és vigye az egérmutatót a kép fölé a frissített elemleírás megtekintéséhez:

Hatások hozzáadása interaktív weboldalához

Most már megértette, hogyan adhat hozzá interaktív elemleírást egy képhez a weboldalán. Folytathatja HTML- és CSS-készségeinek fejlesztését, ha más érdekes HTML-effektusokkal kísérletezik.