Jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
$('[rel=tooltip]').bind('mouseover', function(){
if ($(this).hasClass('ajax')) {
var ajax = $(this).attr('ajax');
$.get(ajax,
function(theMessage){
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');});
}else{
var theMessage = $(this).attr('content');
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
}
$(this).bind('mousemove', function(e){
$('div.tooltip').css({
'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
'left': e.pageX + 15
});
});
}).bind('mouseout', function(){
$('div.tooltip').fadeOut('fast', function(){
$(this).remove();
});
});
});
</script>
Css
<style>
.tooltip{
position:absolute;
width:400px;
background-image:url(tip-bg.png);
background-position:left center;
background-repeat:no-repeat;
color:#FFF;
padding:5px 5px 5px 15px;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
}
.tooltip-image{
float:left;
margin-right:5px;
margin-bottom:5px;
margin-top:3px;
}
.tooltip span{font-weight:700;
color:#ffea00;
}
#imagcon{
overflow:hidden;
float:left;
height:60px;
width:75px;
}
#imagcon img{
max-width:70px;
min-height:100px;
}
#wrapper{
margin:0 auto;
margin-top: 30px;
}
</style>
Html
<html> <head> <title>http://blog-ngelantur.blogspot.com</title> </head> <body> <div id="wrapper"> <a href=# alt=Image Tooltip rel=tooltip content=" <div id=imagcon><img src='1.jpg'> class='tooltip-image'/></div> <div id=con>Web url: <br><b>http://blog-ngelantur.blogspot.com</b> </div> <div id=con>Email: <br>armypriyati@gmail.com </div>">blog-ngelantur</a><br> </div> </body> </html>Source Download
0 komentar:
Posting Komentar