Resmin veya Yazının Üzerine gelindiğinde Açılan Resim ve Yazı
Çok güzel bir özelliktir, bazı formlarda soru işareti olur, üzerine geldiğinizde onu açıklayan bir yazı veya resim çıkar, bilgilendirir bizi.
emreder.js
var ddimgtooltip={
tiparray:function(){
var tooltips=[]
tooltips[0]=["resim1.gif", "Resmin açıklaması", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
tooltips[1]=["resim2.gif", "Resmin açıklaması", {background:"#DDECFF", width:"200px"}]
tooltips[2]=["resim3.jpg"]
tooltips[3]=["resim4.gif", "Resmin açıklaması", {background:"white", font:"bold 12px Arial"}]
return tooltips
}(),
tooltipoffsets: [20, -30],
tipprefix: 'imgtip',
createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},
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-(ddimgtooltip.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.show()
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
$tooltip.hide()
},
init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/)
var tipsuffix=parseInt(RegExp.$1)
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})
})
}
}
ddimgtooltip.init("*[rel^=imgtip]")
cssdosyasi.css
.ddimgtooltip{
box-shadow: 3px 3px 5px #818181;
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;
display:none;
position:absolute;
border:1px solid black;
background:white;
color: black;
z-index:2000;
padding: 4px;
}
HTML Kodu:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />
<script type="text/javascript" src="ddimgtooltip.js"></script>
<p><a href="http://www.emreder.com" rel="imgtip[0]">Yazı 1</a></p>
<p><a href="http://www.emreder.com" rel="imgtip[1]" style="float:right">Yazı 2</a></p>
<p><a href="http://www.emreder.com" rel="imgtip[2]"><img src="resim1.jpg"></a></p>
<p><a href="http://www.emreder.com" rel="imgtip[3]"><img src="resim2.jpg"></a></p>
Kaynağı : http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm
