Sie
23
2013

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

Autor: Arkadiusz Krakiewicz Comments

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?

Tworzymy DIV z listą linków oraz umieszczonym zdjęciem. Nie używamy tagu MAP i AREA.
Linki (kropki) pozycjonujemy na zdjęciu przez:
position: absolute; display: block; margin: Xpx;
W CSS opisujemy wygląd kropek oraz tooltipa.
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

// wrzucamy to w sekcję <head>

$(function() {

$('#twarz_div a').hover(function(){ // po najechaniu myszką na link, uruchamiamy tooltip

// tworzymy nowego DIV dołączając go do #twarz_div

// wypełniamy go treścią pobraną z linka, na który najechaliśmy myszką

$('#twarz_div').append('<div class="tip">' + $(this).prop('title') + '</div>');

// opróżniamy atrybut title dla linka, aby przeglądarka nie wyświetliła go "po swojemu"

$(this).prop({'title':''});

// tworzymy pomocniczną zmienną dla pozycjonowania tooltip

var tip = new Object();

// pobieramy wysokość tooltip, po to aby wypozycjonować go w pionie

tip.height = $('.tip').height();

// pobieramy pozycję linka/kropki względem całego dokumentu

var position = $(this).offset();

// "kalibrujemy" pozycję pionową dla tooltip

position.top -= 25;

tip.top = 0;

// dzięki pobraniu szerokości i podzieleniu jej przez 2, uzyskamy wyśrodkowany tooltip względem kropki/linka

tip.left = $('.tip').width()/2;

// dla wysokości tooltip większej od 15px podnieś go o odpowiednią wartość względem jego wysokości

if ( tip.height > 15 ) {

tip.top = $('.tip').height()/2;

}

// ustawiamy style dla tooltip, który ma właściwość postion: absolute; nadą w CSS

$('.tip').css({'top':(position.top-tip.top) + 'px','left':(position.left-tip.left) + 'px'});

}).mouseleave(function(){ // gdy zjeżdżamy myszką z kropki

// ponownie ustawiamy atrybut title, aby go nie stracić, pobierając go z tooltip

$(this).prop({'title':$('.tip').html()});

// usuwamy tooltip

$('.tip').remove();

});

// jako opcję dla akcji kliknięcie na kropkę

$('#twarz_div a').click(function(){

// wykonuj dowolną akcję

alert('Clicked!\n' + $('.tip').text() );

});

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.

Tagi: html, jquery

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

Tadeusz 1 kwietnia, 2015 o 11:34

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

Odpowiedz

Dodaj komentarz

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.