sie
23
2013

jQuery – ToolTip + Image. Oznacz i opisz zdjęcie.

Często, gdy tworzymy mapę obrazu tzw. image map, oprócz klikalnych obszarów potrzebujemy także opisu i oznaczenia wybranych fragmentów zdjęcia. W wersji ubogiej możemy wykorzystać atrybut title dla tagu map > area. Na szczęście mamy już czasy Web X.0 i chcemy czegoś więcej…
Z pomocą przychodzi nam ToolTip. W tym tutorialu pokażę własny skrypt z wykorzystaniem jQuery. Przydaje się, gdy potrzebujemy pełnej customizacji.

Przykład

Za przykład użyję samego siebie :D

Zobacz kod z możliwością edycji na żywo – http://jsfiddle.net/arwo/mvFp3/11/light/.

 

Jak to działa?

  1. Tworzymy DIV z listą linków oraz umieszczonym zdjęciem. Nie używamy tagu MAP i AREA.
  2. Linki (kropki) pozycjonujemy na zdjęciu przez:
    position: absolute;
    display: block;
    margin: Xpx;
  3. W CSS opisujemy wygląd kropek oraz tooltipa.
  4. W JavaScript z użyciem jQuery wykonujemy:
    Na akcję hover tworzymy w locie DIV, który jest tooltipem.
    Ustawiamy jego treść pobierając ją z atrybutu title wybranego linka.
    Usuwamy zawartość atrybutu title, aby przeglądarka nie pokazywała tytułu linka po najechaniu myszką.
    Pozycjonujemy tooltip.
    Dla akcji mouseleave, ponownie ustawiamy atrybut title dla linka. Dzięki temu będziemy go mogli ponownie użyć.
    Usuwamy DIV z tooltipem.

 

Szczegółowy opis JavaScript

 

Dodatkowe informacje

Mogę polecić poniższe pluginy ToolTip do jQuery:

  • qTip2 – Bardzo rozbudowana funkcjonalność, świetna prezentacja. Jeden z najbardziej znanych pluginów. Niestety nie chciał mi działać plugin ImageLoaded.
  • ImageMapster – Jeżeli potrzebujesz opisu nieregularnych kształtów, np. mapy.

Podobne tematy

Autor wpisu: Arkadiusz Krakiewicz

Programista i właściciel sklepu jednocześnie, dzięki temu rozumie potrzeby osób prowadzących sprzedaż w internecie. Od 2006 związany z eCommerce. Zaczynał jako freelancer tworząc sklepy oraz strony www. Aktualnie zajmuje się: programowanie w PHP, Symfony 2, Android, PrestaShop, osCommerce, OpenCart, WordPress.

1 komentarz + Dodaj komentarz

  • Link do edycji na żywo już nie działa :(

Dodaj komentarz

Anti-Spam

O mnie

Arkadiusz Krakiewicz
Programista aplikacji webowych dla branży eCommerce. Jednocześnie jako właściciel sklepu zna od "podszewki" potrzeby osób prowadzących sprzedaż w internecie.
W swoich rozwiązaniach stawia na funkcjonalność i wydajność aplikacji pod kątem obsługi klienta.
[X]
Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Plików cookies.
Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.
Więcej w Skrypty i moduły
jquery_ajax_download
jQuery – Pobieranie pliku + Wysłanie danych przez Ajax

Z cyklu "Znalezione w sieci", podrzucam krótki skrypt jQuery, który wysyła dane na serwer metodą POST/GET, a następnie zwrotnie otrzymuje...

Zamknij