jQuery tooltip cu imagini

animatii jQuery, functii javascript, invata Javascript, invata jQuery, javascript, jQuery

Pentru ca am vorbit mai devreme de manipularea imaginilor folosind jQuery, acum va voi prezenta o metoda simpla de a genera un tooltip care sa contina o imagine. Puteti folosi acest efect pentru a adauga un plus de unicitate site-ului vostru.

Vom avea nevoie de o structura HTML ca aceasta:

[...]
<a class="a-tt" href="img-mare.jpg"><img src="img-mic.jpg" class="img-tt" width="250" height="250" /></a>
[...]

Acum sa aranjam putin elementele in pagina.

.a-tt {
	display: block;
	width: 250px;
	height: 250px;
	position: relative;
}

Este important sa setam pozitia relativa pentru elementul a.

Folosind jQuery, vom prelua continutul atributului href si il vom afisa intr-un tooltip.

<script type="text/javascript">
jQuery(document).ready(function () {
	$('.img-tt').hover(function() {
		var sursa = $(this).parent().attr('href');
   		$(this).parent().append('<span id="mozku-tooltip"><img src="'+sursa+'" /></span>');
     },function() {
     	$('#mozku-tooltip').remove();
     });
});
</script>

Avem 2 actiuni principale: cand mouse-ul este peste imaginea mica si cand mouse-ul iese din aria acesteia. In prima situatie, variabila sursa va prelua continutul atibutului href si il va afisa intr-un nou element creat in cadrul link-ului (.parent()) cu id-ul mozku-tooltip. In a doua situatie vom sterge elementul nou pentru ca mouse-ul nu se mai afla pe imagine.

Acum sa pozitionam mozku-tooltip. Acesta va fi afisat in partea dreapta. Puteti modifica pozitionarea pentru a se incadra corect nevoilor voastre.

#mozku-tooltip {
	position: absolute;
	left: 255px;
	top: 0px
}

Sa vedem cum arata animatia noastra.

Pentru un efect mai placut am adaugat si un fadeIn/fadeOut. Puteti descarca de mai jos toate fisierele cu acest efect.

Nume: jQuery Tooltip Image (134.08KB) Descriere: Tooltip jQuery care contine imagini Descarcari: 4 Puncte de activitate necesare: 100 puncte Punctele tale: Nu ai suficiente puncte de activitate (mai multe detalii)

Ti-a placut articolul jQuery tooltip cu imagini?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• jQuery efect de zoom pentru imagini
• Zi si noapte folosind JavaScript si jQuery
• Animatii jQuery pentru text
• Sistem multi-language folosind jQuery
• Casute animate folosind jQuery