Ta technika JavaScript może być używana do wielu efektów, w tym podpowiedzi i map obrazów.

Interaktywne strony internetowe mogą zapewnić użytkownikom bardziej wciągające wrażenia. Istnieje wiele sposobów na uczynienie witryny bardziej interaktywną, na przykład dodanie animacji, podpowiedzi lub innych dodatkowych efektów.

Niektóre strony internetowe wyświetlają również informację, gdy użytkownik najedzie kursorem na element na stronie. Obejmuje to mapy lub inne dane wizualne, które pozwalają użytkownikowi najechać kursorem na obraz, aby wyświetlić punkt danych za pomocą podpowiedzi.

Możesz osiągnąć ten efekt za pomocą HTML, CSS i JavaScript, stosując określone techniki CSS i koncepcje JavaScript DOM.

Obrazy mogą być użytecznym sposobem przekazywania informacji w atrakcyjny wizualnie sposób na stronie internetowej. Są również przydatne do dodawania innych atrakcyjnych efektów, takich jak prosta galeria zdjęć.

Możesz dodać podpowiedź do obrazu w HTML, używając CSS i JavaScript.

Kod użyty w tym projekcie jest dostępny w this Repozytorium GitHub na licencji MIT.

instagram viewer
  1. W nowym pliku o nazwie index.html dodaj podstawową strukturę pliku HTML:
    HTML>
    <HTML>
    <głowa>
    <tytuł>Przykład etykiety narzędzia obrazutytuł>
    głowa>
    <ciało>
    ciało>
    HTML>
  2. Wewnątrz znacznika body dodaj element div kontenera. Ten div będzie zawierał zarówno obraz, jak i elementy podpowiedzi:
    <dzklasa="pojemnik">
    dz>
  3. Wewnątrz kontenera dodaj obraz. Upewnij się, że obraz o pasującej nazwie pliku znajduje się w tym samym folderze co plik HTML:
    <imgźródło="obraz.jpg"klasa="obraz"wysokość="420"szerokość="840"alt="Twój obraz">
  4. Pod obrazem dodaj element div reprezentujący podpowiedź:
    <dzklasa=„podpowiedzi”>dz>
  5. W tagu head dodaj tag stylu. Wewnątrz tagu stylu dodaj styl dla kontenera obrazu i podpowiedzi:
    <styl>
    .pojemnik {
    pozycja: względny;
    wyświetlacz: blok wbudowany;
     }

    .podpowiedź {
    pozycja: absolutny;
    lewy: 0;
    wyświetlacz: nic;
    wyściółka: 5piks;
    kolor tła: #000;
    kolor: #ffff;
    rozmiar czcionki: 12piks;
     }
    styl>
  6. Utwórz nowy tag skryptu na dole tagu body:
    <ciało>
     Treść Twojej strony internetowej tutaj 
    <scenariusz>
    scenariusz>
    ciało>
  7. Wewnątrz tagu script, użyj selektora DOM function, querySelector, aby uzyskać elementy HTML obrazu i podpowiedź:
    konst obraz = dokument.querySelector('.obraz');
    konst podpowiedź = dokument.querySelector(„.etykietka”);
  8. Dodaj detektor zdarzeń dla najechanie myszką wydarzenie. Ta funkcja zostanie uruchomiona po najechaniu myszką na obraz. Gdy to nastąpi, na ekranie zostanie wyświetlona podpowiedź:
    image.addEventListener(„najechanie myszką”, () => {
     tooltip.style.display = 'blok';
    });
  9. Dodaj detektor zdarzeń dla mysz wydarzenie. Ta funkcja zostanie uruchomiona, gdy mysz opuści obraz. Gdy to nastąpi, podpowiedź zniknie z ekranu:
    image.addEventListener(„wyjechanie myszą”, () => {
     tooltip.style.display = 'nic';
    });
  10. Otwórz plik index.html w dowolnej przeglądarce i najedź kursorem na obraz, aby wyświetlić podpowiedź:

Jak obliczyć i wyświetlić współrzędne obrazu w pikselach X i Y

Teraz, gdy podpowiedź jest widoczna na stronie, zmień jej położenie i tekst, aby wyświetlić współrzędne X i Y myszy.

  1. Zmień styl CSS podpowiedzi, tak aby etykietka nie była widoczna przed najechaniem kursorem na obraz. Zapobiega to wyświetlaniu podpowiedzi na dole obrazu przed przejściem do lokalizacji kursora:
    .podpowiedź {
    pozycja: absolutny;
    szczyt: -30px;
    lewy: 0;
    wyświetlacz: nic;
    wyściółka: 5piks;
    kolor tła: #000;
    kolor: #ffff;
    rozmiar czcionki: 12piks;
    }
  2. Wewnątrz tagu skryptu dodaj kolejny detektor zdarzeń, aby nasłuchiwać ruch myszy wydarzenie. Ta funkcja będzie wykonywana w sposób ciągły za każdym razem, gdy kursor myszy znajdzie się nad nowym pikselem. Dodaj parametr zdarzenia, który wprowadzi informacje o ruch myszy zdarzenie do funkcji. Te informacje obejmują współrzędne obrazu, w którym znajduje się mysz w tym punkcie:
    image.addEventListener(„przesuń mysz”, (e) => {
    });
  3. Korzystając ze zdarzenia, zmień położenie podpowiedzi w poziomie za pomocą właściwości CSS left. Za każdym razem, gdy mysz się poruszy, zaktualizuje to wartość, aby pasowała do współrzędnych X kursora, przechowywanych w pliku klientX zmienny:
    tooltip.style.left = e.clientX + 'px';
  4. Zmień pionowe położenie podpowiedzi, używając właściwości top CSS. Klient Y reprezentuje współrzędne y myszy. The wysokość odsunięcia zawiera dodatkowe dopełnienie lub obramowanie wewnątrz podpowiedzi. Ponieważ nie chcesz, aby podpowiedź znajdowała się bezpośrednio w miejscu kursora, możesz usunąć dodatkowe 10 pikseli z pozycji:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Zmień treść podpowiedzi, aby wyświetlić współrzędne:
    podpowiedź.tekstZawartość = `X: ${e.przesunięcieX}, Y: ${e.przesunięcieY}`;
  6. Otwórz plik index.html w dowolnej przeglądarce i najedź kursorem na obraz, aby wyświetlić zaktualizowaną podpowiedź:

Dodawanie efektów do interaktywnej strony internetowej

Teraz wiesz, jak dodać interaktywną podpowiedź do obrazu na swojej stronie internetowej. Możesz dalej doskonalić swoje umiejętności HTML i CSS, eksperymentując z innymi interesującymi efektami HTML.