SoulTip v1.1, Basit Javascript Tabanlı tooltip Sistemi {Türkçe}

22.11.2003

Okuyucu : 34.487
Günlük Okuyucu : 21,1
  1. SoulTip Nedir ?
  2. Pratik Kurulum
  3. Platform, Browser Bağımlılıkları
  4. Yeni Sürümde Neler Var ? (Changelog)
  5. Örnekler & Örnek Kodlar
  6. Kaynak Kodunu Download Et
  7. Kod Dokümantasyonu
  8. Bilinen Sorunlar & Hata Bildirimi (bug report)
  9. Eklenilmesi Düşünülenler (to do)
  10. Lisans / Kullanım şartları
  11. Kullanan Siteler
  12. Benzer Javascriptler
  13. FAQ
  14. İletişim - Destek

 

SoulTip Nedir ?;

SoulTip JS & DHTML teknolojileri kullanılarak yazılmış küçük bir skripttir. Sayfanızda bunun gibi sayfadaki objelerin üzerine gelince bir açıklama veya herhangi başka bir şey çıkarmanıza izin verecektir. Kullanımı diğer bu tip çalışmalardan çok daha basittir. İstediğiniz taga help="gösterilecek metin" özelliğini eklemeniz yeterlidir. <a href="http://google.com" help="Google gider"> gibi.

Pratik Kurulum;

  1. soultipv11.zip (veya soultipv11_compact.zip, bkz:compact ? ) dosyasını download edin.
  2. Zip dosyasından çıkacak soultip.js ve soultip.css dosyalarını sayfanız ile aynı klasöre yerleştirin.
  3. Sayfanıza <script language="javascript" src="soultip.js" type="text/javascript"></script> kodunu ekleyin. (<head></head> tagları arasına ekleyebilirsiniz.)
  4. Bundan sonra sayfada help="soultip mesajı" özelliğini kullandığınız tüm objelerde açıklamalarınız SoulTip ile görünecektir. <a href="#" help="test mesajı">Test Linki</a> gibi.

Platform, Browser Bağımlılıkları;

SoulTip Internet Explorer 5 ve üzerinde sorunsuz şekilde çalışacaktır. Diğer browserlar basit şekilde onu kaale almayacaktır ve hata göstermeyeceklerdir. Mac üzerinde test edilmemişti ancak sorun çıkarması beklenmemektedir.

Yeni Sürümde Neler Var ?;

Yeni Sürümde Gelenler, geliştirilenler;

  1. Macormedia Extension Eklenilmesi tamamlandı, beta testlerinden sonra kısa sürede bu sayfadan downloada açılacaktır. (23.Kasım.2003)
  2. Compact Mod Eklendi, Bunun sayesinde SoulTip de özelleştirme istemeyen kullanıcılar çok kısa bir koda ulaşabilecek. Sadece 3kb.
  3. v1.1, fm_findObj() getElementById() ile değiştirildi (17.Kasım.2003)
  4. Yeni düzeltmeler ile performans yükseldi
  5. Kod Dokümantasyonu Eklendi
    Kodun detaylı açıklaması eklendi.
  6. GNU Lisansı altında dağıtılmaya başlandı
  7. SelectBox' larda gösterim sorunu giderildi (Yusuf Uğur Soysal / @hayalet ' e teşekkürler)
  8. Ekrandan taşma sorunları giderildi
  9. Fixed Mod Eklendi ve Stabil bir hale getirildi
    Bu mod sayesinde isterseniz soultip objenin üzerinde çıktıktan sonra, objenin konumuna göre otomatik bir yerde sabit şekilde kalıyor.
  10. HTML & CSS Kodları entegre edildi
    Bu sayede kod daha kolay entegre edilebilir oldu, SoulTip i sayfanız eklemek için atık tek yapmanız gereken .js dosyasını sayfanıza yerşleştirmek.
  11. Yorumlar Genişletildi
    Kodun içerisindeki yorumları daha fazlalaştırarak programcılara biraz olsun kolaylık sağlandı
  12. İngilizce Dokümantasyon
  13. Belli Başlı Skript sitelerinde dağıtımı ve listekenmesini sağlamak

Örnekler;

Link örnekleri : Yep de ! , Yahoo, Ferruh.Mavituna, None Link

<a href="http://www.yahoo.com" help="Go to <strong>Yahoo</strong>">Yahoo</a>

Form Elementleri :

<input type="text" name="test" help="Describe your position, Max <span style='color:#F00'>255</span> character">

<input type="checkbox" name="" help="I love checkboxes !">

<br /><textarea help="More bla bla......."></textarea>

Yükle (download);

  1. SoulTip v1.1 (6kb. - 17.11.2003)
    Son Stabil Versiyonu (Eski versiyonlar için e-mail atmanız gereklidir)

    MD5 Sum:    7a6161f13323f11102a74e5aad3f95c6
  2. SoulTip v1.1 Compact Mod (4kb. 17.11.2003)
    Son Stabil versiyon sıkıştırılmış kodludur. Özelleştirme yapmayacaksanız aynı sizin için aynı görevi görecektir.

    MD5 Sum:    399d6ab1254a0a97c6946db85cfa6f9f

Kod Dokümantasyonu;

Bu kısımda kod hakkında teknik detaylar açıklanmaya çalışacaktır. Eğer ki işin teknik kısmı ile ilgilenmiyorsanız yada başlangıç seviyesinde bile Javascript bilginiz yoksa bu bölümü geçebilirsiniz.

Kodun ilk kısmında soultip için kullanılacak divlerin isimlerini tanımlıyoruz. divname ekranda görülen layerın id'si (ismi) divInnername ise yazının gözükeceği bölgenin ismi.

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

Bu özellik aktif olursa (var fixed=true;) sayesinde mouse objenin üzerine geldiğinde SoulTip üzerine gelinen objeye göre otomatik bir konum alır ve bu objenin mouse bu objenin üzerinden gidene kadar da o konumu değiştirmez. Bunu true veya false olarak set edebilirsiniz.

//If this is true tooltips will not move and shown in fixed mode
var fixed=false;

Kodun kilit noktalarından biri bu kısım. Yeni versiyonda daha kolay kullanım için SoulTip HTML kodu Javascript içerisine gömüldü. Dolayısıyla artık SoulTip layerının HTML kodu JS dosyasının içinde yer alıyor. Aşağıdaki HTML kodunu istediğiniz şekilde değiştirerek kendi özel SoulTip inize sahip olabilirsiniz.

var soultip="<div id='soultip'><div id='soultipinner'></div></div>"

Örnek olarak aşağıdaki kod her SoulTip kutucuğunun başına "Detaylar" kelimesini eklemiş olacaktır.

var soultip="<div id='soultip'><strong>Detaylar</strong><hr><div id='soultipinner'></div></div>"

SoulTip Koordinatları sayesinde çıkacak tooltip kutularının CoordLeft ile soldan kaç pixel, CoordRight ile de sağdan kaç pixel uzakta olacağını belirtebilirsiniz. Kod içerisinde bu veriler ile otomatik oynansa dahi burada girilenler baz alınacaktır.

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

Checkboxları gizleme işleminde kullanılan global bir Array.

// For Storing hidden selects
var hiddenTags = new Array();

fm_MXY() fonksiyonu size mouse' un sayfadaki X ve Y konumunu verir.
Fonksiyon : fm_MXY()
Değişkenler : XorY ("x" veya "y" olarak belirtmeniz gerekir)
Döndürdüğü Değer : Numerik olarak verilen değişkene göre mouse' un sayfadaki X veya Y konumunu verir.

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;
}

fm_help() fonksiyonu esas genel işlemlerin hepsini yapan temel fonksiyondur.
Fonksiyon : fm_help()
Döndürdüğü : SoulTip layerının konumunu değiştirir, üzerindeki objenin help özelliğinin değerini alır ve yazdırma fonksiyonunu (fm_writehelp()) çağırır.

function fm_help(){ // Show-Hide 
	var NewCoordLeft=0,NewCoordRight=0; // Yeni Koordinatları tanımlayıp sıfıra eşitliyoruz
	var thisObj = getElementbyId(divname); // getElementbyId() aracılığı ile SoulTip' i ana divini alıyoruz
SoulTip'in browser kenarıdan görünürken taşmaması amacı ile bazı değişkenleri tanımlamamız gerekiyor. Önce aktif pencerenin boyutlarını almamız gerekiyor. Genişliği basit şekilde document.body.clientWidth ile alıyoruz.Uzunluğu ise document.body.clientHeight ile almamız yetmiyor. Çünkü sayfa boyutu scrollar dahil olmadan bize gelecektir. Bu yüzden mevcut boyut ile Scroollar' ın boyunu topluyoruz. Buna ek olarak ekstra kısımlar için bir default 25 pixel ekliyoruz. Son olarak bize gerekli uzunluk boyutunu document.body.clientHeight+document.body.scrollTop+25 ile elde etmiş oluyoruz. 
   var browserwidth=document.body.clientWidth; // Browser' ın genişliğini alıyoruz
	var browserheight=document.body.clientHeight+document.body.scrollTop+25; // Browser' ın uzunluğunu alıyoruz
SoulTip özelleştirmeye açık bir sistem olduğundan dolayı kendi kutucuklarımızın boyutlarını bilemeyiz. Dolayısıyla kendi kutucuğumuzun boyutlarını tekrar offsetWidth (genişlik) ve offsetHeight (uzunluk) özellikleri ile alıyoruz. Hatırlarsanız getElementbyId() ile thisObj' yi SoulTip ana layerı için obje olarak tanımlamıştık. Dolayısıyla artık ona ulaşmak istediğimizde thisObj objesini kullanıcağız. 10 pixel lik oynamalar için aldığımız değerleri 10 pixel arttırıyoruz. 
   var soulwidth=thisObj.offsetWidth+10, soulheight=thisObj.offsetHeight+10; // Soultip sizes
Mouse' un üzerinde bulunuğu objeyi activeObj olarak alıyoruz. 
	var activeObj=window.event.srcElement; // Active Object
activeObj objesi aracılığı ile aktif objenin help tagını alıyoruz. Dolayısıyla eğer buradaki .help 'i değiştirirseniz objelerinizde kendi tagınızı kullanabilirsiniz. Mesela aşağıdaki kodda activeObj.help' i activeObj.soultip yaparsanız bundan sonra objelerinizde help özelliği yerine soultip özelliğini kullanabilirsiniz. <a href="#" soultip="soultip yardımı !">soultip özelliğini kullanarak</a> 
	var desc=activeObj.help; //help tag
Eğer bulunduğumuz objenin help tagı varsa yani desc boş değilse SoulTip için gerekli hazırlıklara başlayabiliriz. 
	if(desc!=null){	//Eğer desc boş değilse bu işlemleri yap
		var x = fm_MXY("x"), y = fm_MXY("y");
		if(document.alldesc==desc){	//If fixed
			NewCoordLeft=activeObj.offsetLeft+activeObj.offsetWidth-x; // Aktif objenin genişlik ve uzunluğunu alalım
			NewCoordRight=activeObj.offsetTop-y; // Uzunluğunu Alalım
		}

Bundan sonra Yeni sol (NewCoordLeft) ve Üst (NewCoordRight) koordinatlarını oluşturuyoruz.Burada üsr koordinat değişken isminin NewCoordRight olduğuna bakılmamalıdır. O benim bir hatamdır ve bir daha da değiştirmey eüşendim, bir sonraki versiyona inşallah.

Koordinatları oluşturma mantığı;
Pseudo Kod (simülasyon kodu);
(Ana Layer Genişliği + Mouse' un pencerenin solundan olan uzaklığı) büyükse Pencerenin Genişliği Yeni koordinattan Ana Layer genişliği kadar çıkart. Aksi takdirde Yeni koordinat varsayılan uzaklık olsun.

Gerçek Kod (Formülasyon);
NewCoordLeft+=(x+soulwidth>browserwidth)?-soulwidth:CoordLeft;

aynı işlemi uzunluk içinde uygularız. 

NewCoordLeft+=(x+soulwidth>browserwidth)?-soulwidth:CoordLeft; //fikir Yusuf Uğur Soysal - @hayalet
NewCoordRight+=(y+soulheight>browserheight)?-soulheight:CoordRight;
Ana Layer' ı (thisObj) bulduğumuz yeni koordinatlara taşırız. 
thisObj.style.left=x+NewCoordLeft+"px"; //Move X 
thisObj.style.top=y+NewCoordRight+"px"; //Move Y
fm_writehelp(desc); //tagın içerisindeki açıklamayı fm_writehelp yardımı ile yazdırırız.
hy_collusion(thisObj); //Layerın alrındaki selectnboxları sorun çıkarmaması amacı ile gizleriz
Eğer fixed mode aktifse (if(fixed)) açıklamayı cachemize alırız. Bir sonraki seferde hala aynı açıklama varsa SoulTip konumunu değiştirmeyecektir. Aynı açıklama içeren iki link arasında geçişte sorun çıkartma ihtimali olabilir. Ne kadar çok küçük bir ihtimal olsa da henüz bu tip bir soruna rastlanılmadı. 
if(fixed)document.alldesc=desc; //cache for fixed
Eğer tanım boşsa aşağıdaki kod çalışır. Tanımın boş olmasının anlamı şu an SoulTip in ekranda görünmüyor olması anlamına gelir. 
 }else{
     hy_collusionRecover(); //Gizlenmiş olan  
     thisObj.style.display="none"; // Ana Layer' ı gizle
  }

Fonksiyon : fm_writehelp()
Döndürdüğü : Ana Layer' ı alır (thisObj) ve gösterir (thisObj.style.display="block";) ve altlayerın (innerObj) içerisine innerHTML ile verilen değişkenin (val) değerini yazar (innerObj.innerHTML=val;)

function fm_writehelp(val){ // Write Tip
	var thisObj = getElementById(divname); // Get Main Div Object
	var innerObj = getElementById(divInnername); // Get innerObject
	innerObj.innerHTML=val;
	thisObj.style.display="block";	
}
hy_collusion() verilen objenin (obj) altında kalan bölgedeki selectboxların gözükmemesini sağlar. hy_collusionRecover() ise bu gizlenilen selectboxların işlem bitince tekrar görünmesi için kullanılır. Bu iki fonksiyon için tekrar Yusuf Uğur Soysal' a teşekkürler. 
function hy_collusion(obj)
function hy_collusionRecover()
Mutlu Son !, Son olarak sayfaya önceden tanımladığımız HTML kodunu yazıyoruz (document.write(soultip)) ve onmousemove actionına fm_help() fonksiyonunu bağlıyoruz (document.onmousemove=fm_help;) . Bu işlem için sayfanın yüklenmesini beklememize gerek yok. 
// ACTION | Grab mousemove and Write Soultip
document.write(soultip);
document.onmousemove=fm_help;

Bilinen Sorunlar;

  1. Henüz Yok !

Yeni hata bildirin

Eklenilmesi Düşünülenler;

  1. Internet Explorer Filter Desteği
  2. Yardımı aç/kapa özelliği (Cookie Destekli)
  3. Mozilla ile çalıştırma denemeleri
  4. Skin Desteği

Yeni İstek

 

SSS (FAQ);

  1. Compact Mod Nedir ?
    Compact kısaca SouTip' de özelleştirme yapmak istemeyen kullanıcılar için SoulTip' in kodlarının sıkıştırılmış versiyonudur.Normal kodlar toplamda 8kb. iken bu versiyon sadece 3kb.' dir ancak okunması Ancak kod okunamaycak şekildedir. (Compact Mod' u download et)
  2. Hangi Browserlarda çalışır ?
    IE 5.5 ve yukarısı Internet Exploerlarda çalışır. Mozilla ve diğer tarayıcılarda çalışmaz ancak hata da vermez. Kullanıcı normal şekilde sayfada dolaşabilir.
  3. Görünümünü Nasıl Özelleştirebilirim ?
    Font, Renk gibi ayarları basit şekilde soultip.css isimli CSS dosyasını değiştirerek yapabilirsiniz. Biraz CSS bilgisine ihtiyaç duyabilirsiniz.

    Eğer HTML kodunda bir değişilklik istiyorsanız koddaki
    var soultip="<div id='soultip'><div id='soultipinner'></div></div>"

    kısmı isteğinize göre değiştirmeniz gereklidir. Bunun için en azından temel Javascript bilgisine sahip olmalısınız.

Lisans;

Her şekilde, her konumda kişisel amaçla kullanılabilir. Kodları tekrar değiştirilerek (geliştirici isimleri kalmak suretiyle) tekrar kullanılabilir ve her sitede yayınlanabilir. 

   SoulTip v1.1 Javascript based easy tooltip System 
   Copyright (C) {2003} {Ferruh Mavituna} http://ferruh.mavituna.com
This program is free software; you can redistribute it and/or
   modify it under the terms of the GNU General Public License
   as published by the Free Software Foundation; either version 2
   of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
   GNU General Public License for more details.
You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.

Ek Lisans Bilgisi (http://www.gnu.org/licenses/gpl.txt)

GNU Lisansı programın her şekilde ücretsiz kullanılabileceği anlamına gelmez, Free Software' daki Free kelimesi ücretsiz değil Özgür anlamında kullanılmaktadır. Ticari kullanımlar için iletişim kurun lütfen.

 

Eğer sitenizden http://ferruh.mavituna.com ' a herhangi bir şekilde link verirseniz hoş olur.
Geliştirici isimleri olmadan tekrar yayınlanamaz.

Tooltip Konusunda Benzer Javascriptler;

  1. OverLib
    Pek pratik olmayan ancak çok iyi özellikleri bulunan, eski bir javascript.

Kullanan Siteler;

Sitenizde kullanıyorsanız sizde gönderin, siteler liste halinde yayınlancaktır.

 

İletişim - Destek;

Yorumlar

RSS Bu makalenin yorumlarını RSS ile takip et!

Eğer yukarı aşağı scrool' u aşağı doğru kaydırıldıysa Soultip üst kısımda kayboluyor!

Scrool konumundaki bu hata bu sayfada yok! Ama benim eklediğim kodda oluyor.

Bunun çözümü nedir?

Cevap verirseniz sevinirim...

Serdar SARAÇ [ # | 11.05.2006 ]

Firefox'da sorunlu; çalışmıyor...

Ercin Dedeoglu [ # | 12.05.2006 ]

Vbulletin Forumlarda kullanmak istiyorum bunu. ve bir bbcode tanıtmam gerek foruma yani atıyorum mesela;

<div style="width:100%; filter:glow(color=yellow, strength=4)">this text is glowing</div>


bu kodu tanıtıyorum foruma daha sonra da

[glow=yellow]this text is glowing[/glow] yazınca istedigim oluyor..

Şimdi bu scripti tanıtacam fakat tanıtamadm..Bu konuda yardım edebilirmisiniz

Sinan Sogkebir [ # | 12.05.2006 ]

Selam,

mozilla (gecko) için hataları yamamaya çalıştım.şu an gecko için çalışır duruma getirebildim ama koordinat ayarlarının yeniden ele alınması lazım.

mozilla için düzenlediğim hali: http://www.koculu.net/jscss/dhtml/soultip/

(bu yazıyı zoque'a da gönderdim)( http://forum.zoque.net/showthread.php?p=144932)

saygılar

Azer Koçulu [ # | 27.05.2006 ]

Merhaba öncelikle emeğinize sağlık çok güzel bi script.
help="deneme" yazıyorum fakat mesajımın içinde gelen kutucuk yazı ile aynı ebatta olmuyor daha büyük oluyor. Örnekteki
(Link örnekleri : Yep de ! , Yahoo, Ferruh.Mavituna, None Link ) gibi nasıl ayarlayabilirim acaba.

Hakan Yılmaz [ # | 31.05.2006 ]

Merhaba,

Öncelikle elinize sağlık. Gerçekten çok pratik ve kullanışlı bir kod olmuş. Ancak sizden bir ricam var. Bu kodu kullandığım sayfalarda çıkan tip kutucukları tarayıcının kaydırma çubuğunu aşağı indirdiğim zaman daha yukarıda beliriyorlar. Kodu hiç değiştirmeden kullansam dahi yine aynı sorunla karşılaşıyorum. Bunu engellemek için ne yapabilirim?

Şimdiden teşekkür ediyor, iyi çalışmalar diliyorum.

Kenan ŞAHİN

Kenan ŞAHİN [ # | 24.08.2006 ]

Merhaba,

Ticari olarak kullanmak istersek ne kadar para ödeyeceğiz?

Evren TÜRKOĞLU [ # | 09.09.2006 ]

Ticari olarak kullanmak istersek ne kadar para ödeyeceğiz?

Artık ticari olarak kullanım serbest, istediğiniz şekilde kullanabilirsiniz.

Ferruh Mavituna [ # | 09.09.2006 ]

ya şu firefox sorunu çözülse varya mükemmel olacak ya

enginna [ # | 24.11.2006 ]

Ferruh bey, script'in mozilla tabanında da çalışan sürümünü yayınlamayı düşünüyor musunuz?

Cengaver [ # | 17.12.2006 ]

Su an mozilla da calisan surumu var : http://ferruh.mavituna.com/article/?1342 ve http://ferruh.mavituna.com/article/?1340 adresinlerinde iki farkli mozilla destekleyen versiyonu var.

Ferruh Mavituna [ # | 17.12.2006 ]

Bizim yazdigimiz kodda scroll kullanildigi zaman alt kisimda kalan help ler üst kisimda görünüyor. Ancak sizin sayfanizda bir problem yok. Bu konuda bilgilendirirseniz seviniriz. Kolay gelsin.

osman [ # | 03.04.2007 ]

Hayirli Günler ! Bir sorum olacak ! mesela; açilan bir sayfa ile beraber küçük bir pencerede nasil flash açtirabiliriz? beni bilgilendirirseniz çok sevinirim tesekkürler. http://www.trimmer.page.tl

Glimmer [ # | 08.04.2007 ]

doc type yuzunden oluyo

cuma [ # | 19.05.2007 ]


Bizim yazdigimiz kodda scroll kullanildigi zaman alt kisimda kalan help ler üst kisimda görünüyor. Ancak sizin sayfanizda bir problem yok. Bu konuda bilgilendirirseniz seviniriz. Kolay gelsin.


Bu sorunu bende anlamadim

Onurabi [ # | 24.06.2007 ]

Ben düzenleyerek firefox sorununu çözdüm. Düzeltilmis soultip.js:

var divname="soultip";
var divInnername="soultipinner";

/*If this is true tooltips will not move and shown in fixed mode*/
var fixed=false;

/*-----------------------------
Customizable Soultip HTML Code
soultip is the name of main holder;
soultipinner is the place for help;

So you may add your own static headers to id="soultip" div. Do not forget "soultipinner" has dynamic content.
-----------------------------*/

//-----------------------------
/*var soiltip =soiltip + "<div id='soultip' style='";
soiltip =soiltip + "position: absolute;";
soiltip =soiltip + "display: none;";
soiltip =soiltip + "z-index: 255;";

soiltip =soiltip + "padding: 5px;";
soiltip =soiltip + "top: 0px;";
soiltip =soiltip + "left: 0px;";

//Yaz&#253; rengi
soiltip =soiltip + "color: #0000ff;";

//Zemin rengi
soiltip =soiltip + "background-color: #ffee00;";

//Kenarl&#253;k
soiltip =soiltip + "border: 1px solid #ff0000;";

//&#222;effafl&#253;k oran&#253;, az de&#240;er daha &#254;effaf.
var seffaflik = "70";

soiltip =soiltip + "filter: alpha(opacity:" + seffaflik + ");";
soiltip =soiltip + "-khtml-opacity: 0." + seffaflik + ";";
soiltip =soiltip + "-moz-opacity: 0." + seffaflik + ";";
soiltip =soiltip + "-o-opacity: 0." + seffaflik + ";";
soiltip =soiltip + "opacity: 0." + seffaflik + ";";

soiltip =soiltip + "'>&nbsp;</div>";*/
//-----------------------------

var browserName=navigator.appName;
if (browserName!="Microsoft Internet Explorer"){
var soultip="<div id='soultip' style='-moz-opacity:0.85;'><div align='center' valign='middle'><div id='soultipinner'></div></div></div>"
} else {
var soultip="<div id='soultip'><div align='center' valign='middle'><div id='soultipinner'></div></div></div>"
}
// -- END OF Customizations;
/****************************************************************************************/
var ie = document.all

// Fix SoulTip Coordinates
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
var CoordLeft=10;
var CoordRight=-5;
} else {
var CoordLeft=10;
var CoordRight=-50;
}

//* For Storing hidden selects
var hiddenTags = new Array();

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_MXYgecko(XorY,event){ // Mouse Coords
var coord = 0;
XorY=="x"?coord = event.clientX + document.body.scrollLeft:coord = event.clientY + document.body.scrollTop+50;
if(coord<0)coord=0;
return coord;
}
function fm_help(event){ // Show-Hide
var NewCoordLeft=0,NewCoordRight=0;
var d=document;
var thisObj = d.getElementById(divname); // findObj
var browserwidth=document.body.clientWidth; // Browser sizes - Positions
var browserheight=document.body.clientHeight+document.body.scrollTop+25;
var soulwidth=thisObj.offsetWidth+10, soulheight=thisObj.offsetHeight+10; // Soultip sizes

if (window.event)
var activeObj=window.event.srcElement;
else
var activeObj=event.target;

if(activeObj.help)
var desc=activeObj.help; //help tag
else
var desc=activeObj.getAttribute("help") //help tag

if(desc!=null){ //If object help tag exist
if (!ie)var x = fm_MXYgecko("x",event), y = fm_MXYgecko("y",event);
else var x = fm_MXY("x"), y = fm_MXY("y");
if(document.alldesc==desc){ //If fixed
NewCoordLeft=activeObj.offsetLeft+activeObj.offsetWidth-x;
NewCoordRight=activeObj.offsetTop-y;
}

NewCoordLeft+=(x+soulwidth>browserwidth)?-soulwidth:CoordLeft; //idea by Yusuf U&#240;ur Soysal - hayalet
NewCoordRight+=(y+soulheight>browserheight)?-soulheight:CoordRight;

thisObj.style.left=x+NewCoordLeft+"px"; //Move X
thisObj.style.top=y+NewCoordRight+"px"; //Move Y

fm_writehelp(desc); //print output
hy_collusion(thisObj); //Hide SelectBoxes by hayalet

if(fixed)document.alldesc=desc; //cache for fixed

}else{
hy_collusionRecover(); //Recover Selects by hayalet
thisObj.style.display="none";
}
}

function fm_writehelp(val){ // Write Tip
var d=document;
var thisObj = d.getElementById(divname);
var innerObj = d.getElementById(divInnername);
innerObj.innerHTML=val;
thisObj.style.display="block";
}

function hy_collusion(obj){ // Hide Selectboxes by Yusuf U&#240;ur Soysal - hayalet
var offsetLeft = obj.offsetLeft;
var offsetTop = obj.offsetTop;
var offsetWidth = obj.offsetWidth;
var offsetHeight = obj.offsetHeight;

var topLeftX = offsetLeft;
var topLeftY = offsetTop;
var bottomRightX = offsetLeft + offsetWidth;
var bottomRightY = offsetTop + offsetHeight;
var hyl = 0;

if(document.getElementsByTagName){
var selectTags = document.getElementsByTagName("select");

for( ; hyl < selectTags.length; hyl++){
var tag = selectTags[hyl];
var x1 = tag.offsetLeft;
var y1 = tag.offsetTop;
var x2 = x1 + tag.offsetWidth;
var y2 = y1 + tag.offsetHeight;

if( ((topLeftX < x1 && x1 < bottomRightX) || (topLeftX < x2 && x2 < bottomRightX)) &&
((topLeftY < y1 && y1 < bottomRightY) || (topLeftY < y2 && y2 < bottomRightY)) ) {

tag.style.visibility = "hidden";
hiddenTags[ hiddenTags.length ] = tag;
}
else
tag.style.visibility = "visible";
}
}
}
function hy_collusionRecover(){// Hide Selectboxes by Yusuf U&#240;ur Soysal - hayalet
var hyl = 0;

for( ; hyl<hiddenTags.length; hyl++)
hiddenTags[hyl].style.visibility = "visible";
}

// ACTION | Grab mousemove and Write Soultip
document.write(soultip);

if (document.addEventListener)
document.addEventListener("mousemove", fm_help, true);
else
document.onmousemove=fm_help;

aferust [ # | 05.09.2007 ]

Yorum Ekle





Kullanılabilir Taglar : [<blockquote>] [<strong>] [<em>]

Diğer Yazılar

Neredeyim ?

Ferruh.Mavituna » SoulTip » SoulTip v1.1, Basit Javascript Tabanlı tooltip Sistemi {Türkçe}

RSS Feed site statistics RSS Subscribers
Siteyi E-mail ile Takip Et

Ferruh Mavituna
© 2002-2007, Ferruh Mavituna

Sabit IP Adresi : 81.22.99.133, SSL Erişimi, Hakkında