<div id="twarz_div"> <a href="#glowa" title="Głowa" style="margin: 49px 0 0 77px;"></a> <a href="#policzek" title="Tytuł linka<br>z użyciem tagu BR" style="margin: 110px 0 0 90px;"></a> <a href="#usta" title="Usta i <b>HTML</b>" style="margin: 123px 0 0 40px;"></a> <img id="twarz" src="http://krakiewicz.pl/wp-content/themes/alltuts/images/arek_profil_d.jpg"> </div>
#twarz_div a { outline: 0; position: absolute; display: block; border-radius: 6px; border: 1px solid #000; width: 10px; height: 10px; background: #FFD006; } .tip { position: absolute; display: block; border: 1px solid #F1D031; background: #FFFFA3; padding: 3px 5px 5px 5px; border-radius: 3px; text-align: center; font-family: Arial; font-size: 12px; }
$(function() { $('#twarz_div a').hover(function(){ $('#twarz_div').append('<div class="tip">' + $(this).prop('title') + '</div>'); $(this).prop({'title':''}); var tip = new Object(); tip.height = $('.tip').height(); var position = $(this).offset(); position.top -= 25; tip.top = 0; tip.left = $('.tip').width()/2; if ( tip.height > 15 ) { tip.top = $('.tip').height()/2; } $('.tip').css({'top':(position.top-tip.top) + 'px','left':(position.left-tip.left) + 'px'}); }).mouseleave(function(){ $(this).prop({'title':$('.tip').html()}); $('.tip').remove(); }); $('#twarz_div a').click(function(){ alert('Clicked!\n' + $('.tip').text() ); }); });