Sie
23
2013
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?
- Tworzymy
DIV
z listą linków oraz umieszczonym zdjęciem. Nie używamy taguMAP
iAREA
. - 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 atrybututitle
wybranego linka.
Usuwamy zawartość atrybututitle
, aby przeglądarka nie pokazywała tytułu linka po najechaniu myszką.
Pozycjonujemy tooltip.
Dla akcjimouseleave
, ponownie ustawiamy atrybuttitle
dla linka. Dzięki temu będziemy go mogli ponownie użyć.
UsuwamyDIV
z tooltipem.
Szczegółowy opis JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
// 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.
Podobne tematy
1 komentarz + Dodaj komentarz
Dodaj komentarz
O mnie
Najnowsze wpisy
- Drzewo kategorii – budowa struktury od dołu do góry
- PHPExcel – export + import pliku XLS
- WordPress + Polylang – Tworzenie klasy CSS z ID strony/wpisu w wybranym języku
- Mailing – Poprawna konstrukcja szablonu maila HTML/CSS i prawidłowy wygląd w programie pocztowym
- Szukasz programisty PHP dla e-commerce?
Link do edycji na żywo już nie działa :(