Js. Kayan Yazı - Link Üzerinde Çıkıyor 2

**cakarcy** · 02-04-2008, 03:20

Sanırım bugun kendimi aştım :)
Gün içerisinde, sürekli oalrak fare imlecinini takip eden bir kayan yazı kutucuğu eklemiştim.
Bunun üzerine gelen bir istek

1- Aynısının resimlisi de olsun du (Ekledik

)
2- Sadece Link Üzerine gelince kayan yazı çıksın dı (Oda burda:) )
----------------------------------------------------------------------------

Özellik :
- Link veya içerik üzerine gelindiğinde fare imlecinin hemen yanında kayan yazı beliriyor.

Kullanım :

Adım 1 : Arkadaşlar ilk önce Link Kodu bölmesinde bulunan kodu <body> tagları içine yerleştirin.

Adım 2: "showtip2(this,event,'Siteye girmek için tıklayın')"
Link kodu içerisinde bulunan bu alanı kendinize göre değiştirin
bu yazı: Link üzerine geldiginde çıkacak olan mesajdır.

Adım 3 : Photoshop Uzmanı - Türkiyenin Photoshop Portalı - Anasayfa yazan yerdeki url yi kendinize göre değiştirin.
(Not : burada http : // www. siteadi. com şeklinde bi adres var ama forumda görünmüyor.)

Adım 4 : Photoshopuzmani.Com Aynı kod içerisindeki bu alanıda yine kendinize göre değiştirin bu alanda yazacagınız yazı veya içerik link in görünen kısmı olacak?

Adım 5 : Yine <body> tagları içine (yani link kodunun hemen altına) Script : kodunu yapıştırın.

Adım 6 : burda ise Özelleştirme : diye adlandırdıgım kodu yine <body> tagları içine (yani script kodunun hemen altına) yapıştırın.

Link Kodu :

Code:

<a onmouseover="showtip2(this,event,'Siteye girmek için tıklayın')" onmouseout="hidetip2()" href="Photoshop Uzmanı - Türkiyenin Photoshop Portalı - Anasayfa">
Photoshopuzmani.Com</a>

Script :

Code:

<script type="text/javascript">
/***********************************************
* Scrolling Tooltip Script- © ERDOGANCAKAR
* Link üzerine gelindiğinde kayan yazı
* cakarcy@hotmail.com
* Photoshopuzmani.com Üyeleri
***********************************************/
function ietruebody(){ //Photoshopuzmani.com / cakarcy@hotmail.com
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+ietruebody().scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+ietruebody().scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>

Özelleştirme :

Code:

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:white">
<layer name="nstip" width=1000px bgColor="white"></layer>
</div>

Not : Bunu birden fazla linke uygulamak için sadece LİNK KODU nu kopyalayın.. (Kod un tamamını değil yani :) )

Elimden geldğince detaylı ve en Kolay şekilde anlatmaya çalıştım. Umarım faydası olur

Kolay gelsin...

Ve
Son olarak özel isteklerde bulunmayın arkadaşlar.
Bu ricamı hepinizin anlayışla karşılayacağından eminim.
Web tasarımını ticari amaçla yapan bir tasarımcıyım ve bana ait kodların tamamını burda paylaşırsam, iyi olmaz sanırım.

Ama elimden geldiğince nette gezen saçma scriptler yerine daha kalitelilerini paylaşacağım.Yani burdaki ayrıcalığı fark edeceksiniz

[Alıntı yapılabilir . Author bilgilerini değiştirmeyin]

**Kültürlü Kedi** · 02-04-2008, 03:38

Eline sağlık.

Bi js. bi .css tek geçerim...
Biri noktadan önce biri noktadan sonra

~~illegal~~ · 03-05-2008, 19:08

eline sağlık :D

Gokmavi · 03-28-2008, 17:12

saol

bela1040 · 04-04-2008, 18:24

Çok güzel Fakat internet Explorer da Çalışmıyor.

02-04-2008, 03:20	#1 (permalink)
cakarcy Editör Üyelik Tarihi: Jan 2008 Mesajlar: 174 Teşekkür Et: 0 Thanked 46 Times in 19 Posts Tecrübe Puanı: 2	Js. Kayan Yazı - Link Üzerinde Çıkıyor 2 Sanırım bugun kendimi aştım :) Gün içerisinde, sürekli oalrak fare imlecinini takip eden bir kayan yazı kutucuğu eklemiştim. Bunun üzerine gelen bir istek 1- Aynısının resimlisi de olsun du (Ekledik ) 2- Sadece Link Üzerine gelince kayan yazı çıksın dı (Oda burda:) ) ---------------------------------------------------------------------------- Özellik : - Link veya içerik üzerine gelindiğinde fare imlecinin hemen yanında kayan yazı beliriyor. Kullanım : Adım 1 : Arkadaşlar ilk önce Link Kodu bölmesinde bulunan kodu <body> tagları içine yerleştirin. Adım 2: "showtip2(this,event,'Siteye girmek için tıklayın')" Link kodu içerisinde bulunan bu alanı kendinize göre değiştirin bu yazı: Link üzerine geldiginde çıkacak olan mesajdır. Adım 3 : Photoshop Uzmanı - Türkiyenin Photoshop Portalı - Anasayfa yazan yerdeki url yi kendinize göre değiştirin. (Not : burada http : // www. siteadi. com şeklinde bi adres var ama forumda görünmüyor.) Adım 4 : Photoshopuzmani.Com Aynı kod içerisindeki bu alanıda yine kendinize göre değiştirin bu alanda yazacagınız yazı veya içerik link in görünen kısmı olacak? Adım 5 : Yine <body> tagları içine (yani link kodunun hemen altına) Script : kodunu yapıştırın. Adım 6 : burda ise Özelleştirme : diye adlandırdıgım kodu yine <body> tagları içine (yani script kodunun hemen altına) yapıştırın. Link Kodu : Code: <a onmouseover="showtip2(this,event,'Siteye girmek için tıklayın')" onmouseout="hidetip2()" href="Photoshop Uzmanı - Türkiyenin Photoshop Portalı - Anasayfa"> Photoshopuzmani.Com</a> Script : Code: <script type="text/javascript"> /*********************************************** * Scrolling Tooltip Script- © ERDOGANCAKAR * Link üzerine gelindiğinde kayan yazı * cakarcy@hotmail.com * Photoshopuzmani.com Üyeleri *********************************************/ function ietruebody(){ //Photoshopuzmani.com / cakarcy@hotmail.com return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } if (!document.layers&&!document.all) event="test" function showtip2(current,e,text){ if (document.all&&document.readyState=="complete"){ document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>' document.all.tooltip2.style.pixelLeft=event.clientX+ietruebody().scrollLeft+10 document.all.tooltip2.style.pixelTop=event.clientY+ietruebody().scrollTop+10 document.all.tooltip2.style.visibility="visible" } else if (document.layers){ document.tooltip2.document.nstip.document.write('<b>'+text+'</b>') document.tooltip2.document.nstip.document.close() document.tooltip2.document.nstip.left=0 currentscroll=setInterval("scrolltip()",100) document.tooltip2.left=e.pageX+10 document.tooltip2.top=e.pageY+10 document.tooltip2.visibility="show" } } function hidetip2(){ if (document.all) document.all.tooltip2.style.visibility="hidden" else if (document.layers){ clearInterval(currentscroll) document.tooltip2.visibility="hidden" } } function scrolltip(){ if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) document.tooltip2.document.nstip.left-=5 else document.tooltip2.document.nstip.left=150 } </script> Özelleştirme : Code: <div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:white"> <layer name="nstip" width=1000px bgColor="white"></layer> </div> Not : Bunu birden fazla linke uygulamak için sadece LİNK KODU nu kopyalayın.. (Kod un tamamını değil yani :) ) Elimden geldğince detaylı ve en Kolay şekilde anlatmaya çalıştım. Umarım faydası olur Kolay gelsin... Ve Son olarak özel isteklerde bulunmayın arkadaşlar. Bu ricamı hepinizin anlayışla karşılayacağından eminim. Web tasarımını ticari amaçla yapan bir tasarımcıyım ve bana ait kodların tamamını burda paylaşırsam, iyi olmaz sanırım. Ama elimden geldiğince nette gezen saçma scriptler yerine daha kalitelilerini paylaşacağım.Yani burdaki ayrıcalığı fark edeceksiniz [Alıntı yapılabilir . Author bilgilerini değiştirmeyin]**

02-04-2008, 03:38	#2 (permalink)
Kültürlü Kedi Editör Üyelik Tarihi: Dec 2007 Bulunduğu Yer: İstanbul Yaş: 22 Mesajlar: 1.398 Teşekkür Et: 97 Thanked 187 Times in 68 Posts Tecrübe Puanı: 3	Ce: Js. Kayan Yazı - Link Üzerinde Çıkıyor 2 Eline sağlık. Bi js. bi .css tek geçerim... Biri noktadan önce biri noktadan sonra

03-05-2008, 19:08	#3 (permalink)
~~illegal~~ Yasaklı Üye Üyelik Tarihi: Feb 2008 Bulunduğu Yer: Kütahya - Merkez Yaş: 15 Mesajlar: 905 Teşekkür Et: 197 Thanked 40 Times in 31 Posts Tecrübe Puanı: 0	Ce: Js. Kayan Yazı - Link Üzerinde Çıkıyor 2 eline sağlık :D

03-28-2008, 17:12	#4 (permalink)
Gokmavi Çalıştı Çalıştı En Sonunda Bişeler Öğrendi :) Üyelik Tarihi: Feb 2008 Bulunduğu Yer: Kütahya - Merkez Yaş: 16 Mesajlar: 306 Teşekkür Et: 67 Thanked 33 Times in 21 Posts Tecrübe Puanı: 2	Ce: Js. Kayan Yazı - Link Üzerinde Çıkıyor 2 saol

04-04-2008, 18:24	#5 (permalink)
bela1040 İlerleyen Günlerde Profesyonel PS'ci olacak :) Üyelik Tarihi: Mar 2008 Yaş: 19 Mesajlar: 74 Teşekkür Et: 1 Thanked 4 Times in 2 Posts Tecrübe Puanı: 2	Ce: Js. Kayan Yazı - Link Üzerinde Çıkıyor 2 Çok güzel Fakat internet Explorer da Çalışmıyor.

Konu Seçenekleri
Yazdırılabilir Sümü Göster Sayfayı E-Mail'le gönder
Modları Göster
Normal Mod Ağaç Modununa Geç Otomatik Konu Moduna Geç