PASTEKAN SAJA DI GADGET: HTML/JAVASCRIPT .

KEBAWAH


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stickytooltip.js">
</script>
<link rel="stylesheet" type="text/css" href="stickytooltip.css" />
<script>
var stickytooltip={
 tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
 fadeinspeed: 200, //duration of fade effect in milliseconds
 rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
 stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
 stickynotice1: ["tekan \"s\"", "atau klik kanan", "agar kotak melengket"], //customize tooltip status message
 stickynotice2: "klik diluar kotak agar menghilang", //customize tooltip status message

 //***** NO NEED TO EDIT BEYOND HERE

 isdocked: false,

 positiontooltip:function($, $tooltip, e){
  var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
  var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
  x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
  y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
  $tooltip.css({left:x, top:y})
 },

 showbox:function($, $tooltip, e){
  $tooltip.fadeIn(this.fadeinspeed)
  this.positiontooltip($, $tooltip, e)
 },

 hidebox:function($, $tooltip){
  if (!this.isdocked){
   $tooltip.stop(false, true).hide()
   $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
  }
 },

 docktooltip:function($, $tooltip, e){
  this.isdocked=true
  $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
 },


 init:function(targetselector, tipid){
  jQuery(document).ready(function($){
   var $targets=$(targetselector)
   var $tooltip=$('#'+tipid).appendTo(document.body)
   if ($targets.length==0)
    return
   var $alltips=$tooltip.find('div.atip')
   if (!stickytooltip.rightclickstick)
    stickytooltip.stickynotice1[1]=''
   stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
   stickytooltip.hidebox($, $tooltip)
   $targets.bind('mouseenter', function(e){
    $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
    stickytooltip.showbox($, $tooltip, e)
   })
   $targets.bind('mouseleave', function(e){
    stickytooltip.hidebox($, $tooltip)
   })
   $targets.bind('mousemove', function(e){
    if (!stickytooltip.isdocked){
     stickytooltip.positiontooltip($, $tooltip, e)
    }
   })
   $tooltip.bind("mouseenter", function(){
    stickytooltip.hidebox($, $tooltip)
   })
   $tooltip.bind("click", function(e){
    e.stopPropagation()
   })
   $(this).bind("click", function(e){
    if (e.button==0){
     stickytooltip.isdocked=false
     stickytooltip.hidebox($, $tooltip)
    }
   })
   $(this).bind("contextmenu", function(e){
    if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
     stickytooltip.docktooltip($, $tooltip, e)
     return false
    }
   })
   $(this).bind('keypress', function(e){
    var keyunicode=e.charCode || e.keyCode
    if (keyunicode==115){ //if "s" key was pressed
     stickytooltip.docktooltip($, $tooltip, e)
    }
   })
  }) //end dom ready
 }
}

//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")
</script>

<style>
.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}


.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}
</style>

<p>contoh link </p>

<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>

<p>contoh gambar </p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
THAILAND ADALAH SALAH 1 NEGARA DI ASIA
</div>

<div id="sticky2" class="atip"  style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />paling barat provinsi Kanada terkenal karena keindahan alamnya,.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b>adalah kota terbesar SM
</div>

<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div>

</div>

<div class="stickystatus"></div>
</div>



KEMBALI

KE ATAS.