[soul]

Nedir ?
SoulTip JS & DHTML teknolojileri kullanılarak yazılmış bir küçük bir skripttir. Sayfanızda objelerin üzerine gelince bir açıklama veya herhangi başka bir şey çıkarmanıza izin verecektir.


Uyumluluk
IE5+ üzerinde test edilmiştir.
Resim, Form Objesi, Linklerde sağlıklı bir şekilde çalışmaktadır.


Download
http://ferruh.mavituna.com/opensource/fmhelpv7.zip


Detaylı Açıklama ve Örnekler
http://ferruh.mavituna.com/article.asp?181


Kullanım
.zip dosyasından çıkacak "css" klasörünü ve "js" klasörünü sitenizin altına kopyalayın.
Sayfanıza

PHP Code:

<!--SoulTip için Gerekli Kodlar-->
<script language="javascript" src="js/soultip.js" type="text/javascript"></script>
<link href="css/soultip.css" rel="stylesheet" type="text/css" />

<!--Bu tablo herhangi bir HTML Editörde basitçe özelleştirilebilir, Önemli olan <div id="soultip"></div> içerisinde kalmasıdır-->
<div id="soultip">
  <table border="0" cellpadding="0" cellspacing="0" width="195">
    <tr> 
      <td><img src="soultipmg/spacer.gif" width="8" height="1" border="0" alt="" /></td>
      <td><img src="soultipmg/spacer.gif" width="186" height="1" border="0" alt="" /></td>
      <td><img src="soultipmg/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      <td><img src="soultipmg/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr> 
      <td colspan="3"><img src="soultipmg/gup_r1_c1.gif" alt="" width="195" height="1" border="0" /></td>
      <td><img src="soultipmg/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr> 
      <td rowspan="2"><img src="soultipmg/gup_r2_c1.gif" alt="" width="8" height="58" border="0" /></td>
      <td valign="top" bgcolor="#FFFF00" align="center" valign="middle" id="soultipinner">&nbsp;</td>
      <td rowspan="2"><img src="soultipmg/gup_r2_c3.gif" alt="" width="1" height="58" border="0" id="gup_r2_c3" /></td>
      <td><img src="soultipmg/spacer.gif" width="1" height="56" border="0" alt="" /></td>
    </tr>
    <tr> 
      <td><img src="soultipmg/gup_r3_c2.gif" alt="" width="186" height="2" border="0" /></td>
      <td><img src="soultipmg/spacer.gif" width="1" height="2" border="0" alt="" /></td>
    </tr>
  </table>
</div>
<!--/SoulTip için Gerekli olanlar--> 


Kodlarını ekleyin.

Bundan sonra

PHP Code:

<a href="http://forum.zoque.net" help="Zoque Forumda Scriptin detaylı açıklamasını yaptık">Zoque Forum</a> 


şeklinde sayfanızda kullanabilirsiniz. Yani ilgili objenin tagının içerisine help="tooltip metni" yazmanız yeterlidir.

Önemli olan noktalar
Javascriptin ve CSS' nin herhangi bir şekilde sayfaya eklenmiş olması.
<div id="soultip">... ile başlayan "soultip" divinin sayfada bulunması.

Bunun yerine
<div id="soultip"><div id="soultipinner"></div></div>
yazmanızda scriptin temel olarak çalışması için yeterlidir.

Özelleştirmeleri CSS dosyasından yapabilirsiniz. Aynı şekilde divin içerisini de kendinize göre özelleştirebilirsiniz.

Unutmayın ki "<div id="soultipinner"></div>" içerisindee tooltip metin gözülecek. Bu <td id="soultipinner"></td> veya <span id="soultipinner"></span>

şeklinde de olabilir.



Ekran Görüntüsü
http://ferruh.mavituna.com/opensourc...screenshot.gif


Yardım Destek
Buradan veya http://ferruh.mavituna.com dan destek & Yardım alabilirsiniz.

[aziL]

tabrikler dostum, çok süper bir şey bu.

[kalanlar]

harika.. tek kelimeyle mükemmel hatta

[fleXin]

asdfclub ta olduğu gibi bu şeylerin mouse oynasa bile sabit kalmasını, yani hiç kıpırdamadan durmasını nasıl sağlarız acep ?

[hiGS]

Yaa ben cok beyendim ve kullanacamda...

[absconder]

beceriksizleştim mi ne... indiremedim de... dede yöntemlerine mi dönsek

file download of [fmhelpv7.zip] was not completed successfuly.
server has internal error...

[hiGS]

internette var hala ama istiyorsan mail sole yollayayım

[soul]

iltifatlara layık olmaya çalışıyoruz

@flexin güzel soru
Hocam aslında şu var asdfclub taki elle kordinat verilmiş bir hali bunun. Ancak bu scripte küçük bir modifikasyon ile istediğini yapabiliriz.

Nitekim yaptım da buyrun yeni js kodu; {Static.VR}


Statik Versiyonu
Mouse üzerine geldiğinde ilk çıktığı yerde kalır.

PHP Code:

//*********************************//
// SoulTip v0.8 + Static.VR
//*********************************//
// by Ferruh Mavituna
// [email]ferruh@mavituna.com[/email]
// Non-Commercial use Only
//*********************************//
// 25.04.2003
// IE5+ Only
//*********************************//
// sample : <a href="test.htm" help="Go to test page">Look at me !</a>
// For more info [url]http://ferruh.mavituna.com/[/url]

//* Customizations;
var divname="soultip";
var divInnername="soultipinner";

//* Fix SoulTip Coordinates
var CoordLeft=10;
var CoordRight=-15;

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 fm_MXY(XorY){ // Mouse Coords
    var coord = 0;
    XorY=="x"?coord = event.clientX + document.body.scrollLeft:coord = event.clientY + document.body.scrollTop;
    if(coord<0)coord=0;
    return coord;
}
function fm_help(){ // Show-Hide 
    var thisObj = fm_findObj(divname);
    
    var desc = window.event.srcElement.help;
    if(desc!=null){
        fm_writehelp(desc)
        if(document.alldesc!=desc){
            var x = fm_MXY("x"), y = fm_MXY("y");
            thisObj.style.left=x+CoordLeft+"px";
            thisObj.style.top=y+CoordRight+"px";
        }
        
        document.alldesc=desc;
    }else{
        thisObj.style.display="none";
    }
}
function fm_writehelp(val){ // Write Tip
    var thisObj = fm_findObj(divname);
    var innerObj = fm_findObj(divInnername);
    innerObj.innerHTML=val;
    thisObj.style.display="block";
}

// Grab mousemove
document.onmousemove=fm_help; 


Eski jsni (soultip.js) bununla değiştirirsen istediğin şekilde çalışacaktır.

değişen yer;

PHP Code:

function fm_help(){ // Show-Hide 
    var thisObj = fm_findObj(divname);
    
    var desc = window.event.srcElement.help;
    if(desc!=null){
        fm_writehelp(desc)
        if(document.alldesc!=desc){
            var x = fm_MXY("x"), y = fm_MXY("y");
            thisObj.style.left=x+CoordLeft+"px";
            thisObj.style.top=y+CoordRight+"px";
        }
        
        document.alldesc=desc;
    }else{
        thisObj.style.display="none";
    }
} 


[fleXin]

çok sağol soul

kod yazan ellerin dert görmesin

[soul]

@flexin Rica ederiz

Gönderen: absconder
beceriksizleştim mi ne... indiremedim de... dede yöntemlerine mi dönsek

file download of [fmhelpv7.zip] was not completed successfuly.
server has internal error...

Hocam indirmesi gerekiyor ben şimdi bir defa daha test ettim.