toolTip sorusu

stbolen · 08.08.2006

Arkadaşlar toolTip leri bilirsiniz. Şu üzerine fare ile gelince beliren açıklama. Ben bir örneğini yazdım ama bir şeyi halledemedim. Kodlar şöyle:

index.HTML

Kod:

<HTML>
<head>
<title>Tip</title>
<script language="JavaScript" src="title.js" type="text/JavaScript"></script>
</head>
<body>

<a href="#" onMouseOver="TipGoster(event,'forum.ceviz.net')" onMouseMove="TipGoster(event,'forum.ceviz.net')" onMouseOut="TipGizle()">Link</a>

<div id="Tip" style="left:0px; top:0px; position:absolute; display:none; border:1px solid silver; background-color:#f4f4f4; padding:4px; filter: alpha(opacity=80);	-moz-opacity: 0.8; font:Verdana, Arial, Helvetica, sans-serif; font-size:12px;">Selam</div>

</body>
</HTML>

title.js

Kod:

// JavaScript Document
function fm_findObj(n, d) { //v4.01 MM Find Obj. by Macromedia 
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=fm_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}


function TipGoster(event,text)
{
	var TipID = fm_findObj('Tip');
	x=event.clientX;
	y=event.clientY;
	x+=10;
	y+=10;	
	TipID.style.left = x;
	TipID.style.top = y;
	TipID.style.display = "block";
	TipID.innerHTML = text;
}

function TipGizle()
{
	var TipID = fm_findObj('Tip');
	TipID.style.display = "none";
	TipID.style.left = 0;
	TipID.style.top = 0;
}

Yukarıdaki örnek çalışıyor. ama ben link görüldüğü gibi link elementinde 3 event kullandım. (onmouseover, onmousemove ve onmouseout) bun sadece onmouseover eventi ile halletmek istiyorum. bunun için de link elementinin onmousemove ve onmouseout eventlerine fonksion atamam lazım. bir türlü halledemedim. teşekkürler...

fatihunal · 08.08.2006

Amaç çözüm ise Tam olarak sorunuzun cevabı olmasa da JS ile fazla kasmadan CSS ile çok rahat yapabilirsiniz.

Örnek vermek gerekirse;

http://psacake.com/web/jl.asp
http://loadaveragezero.com/vnav/labs/CSS/tooltips.php
http://fijiwebdesign.com/content/view/82/77/

stbolen · 09.08.2006

Sevgili fatihunal teşekkürler. Örnekler güzel. Ben de şu şekilde hallettim.

Kod:

<HTML>
<head>
<title>Tip</title>
<script language="JavaScript">
var theObj="";

function toolTip(metin,me) {
	theObj=me;
	theObj.onmousemove=tipDevam;
	document.getElementById('Tip').innerHTML=metin;  
}

function tipDevam() {

	document.getElementById('Tip').style.display="block";
	var ev=arguments[0]?arguments[0]:event;
	var x=ev.clientX;
	var y=ev.clientY;
	x+=10;
	y+=10;	
	document.getElementById('Tip').style.left = x;
	document.getElementById('Tip').style.top = y;	
	
	theObj.onmouseout=tipGizle;
}

function tipGizle() {
	document.getElementById('Tip').style.display="none"; 
}


</script>
</head>
<body>

<a href="#" onMouseOver="toolTip('forum.zoque.net<br>Ayrıca Selamlar...',this)">Link</a>
<div id="Tip" style="left:0px; top:0px; position:absolute; display:none; border:1px solid silver; background-color:#f4f4f4; padding:4px; filter: alpha(opacity=80);	-moz-opacity: 0.8; font:Verdana, Arial, Helvetica, sans-serif; font-size:12px;"></div>

</body>
</HTML>

Dhilgul · 09.08.2006

Selam..

Ferruh Mavituna'nın kendi yazdığı çok hoş bir script vardı şu adreste.

Kolay gelsin..

08.08.2006	#2 (permalink)
fatihunal Üyelik Tarihi: 14.06.2004 Yer: Ege'nin en büyük köyü Yaş: 26 Mesaj: 574	Re: toolTip sorusu Amaç çözüm ise Tam olarak sorunuzun cevabı olmasa da JS ile fazla kasmadan CSS ile çok rahat yapabilirsiniz. Örnek vermek gerekirse; http://psacake.com/web/jl.asp http://loadaveragezero.com/vnav/labs/CSS/tooltips.php http://fijiwebdesign.com/content/view/82/77/ __________________ Aza sormuşlar nereye gidiyorsun diye. Çoğun yanına demiş. :confused:

09.08.2006	#4 (permalink)
Dhilgul Üyelik Tarihi: 05.05.2006 Yer: Kocaeli & İstanbul Yaş: 21 Mesaj: 384	Re: toolTip sorusu Selam.. Ferruh Mavituna'nın kendi yazdığı çok hoş bir script vardı şu adreste. Kolay gelsin.. __________________ \| Yazım Kuralları \| İmla Kuralları \| Türk Dil Kurumu \| Dahi anlamındaki "de" ayrı yazılır. \|

Sponsorlu Bağlantılar
Zoque.Forum Reklam