Açıklamalı menü 1

KaPTaN X · 31.08.2006, 14:37

Bu menü yardımı ile sayfanızı ziyaret edenlere farklı bir imaj ve bilgi verebilirsiniz. Sayfada her link için bir açıklama resmi ve birde link üzerinde mouse yokken görünecek bir resim olmak zorundadır.
Kullacacğınız resimler ve butonların uyumları sayfanın görünüşüne ayrı bir hava katacaktır.

Bu scripti kullanırken öncelikle gerekli link sayısı artı bir olacak şekilde resimlerimizi yazırlıyoruz. Bu resimler kadar
var aciklaN=new Image(); şeklinde javascripte yeterli miktarda resim alanı açmasını sağlıyoruz. Burada aciklaN şeklinde girdiğimiz değer kullanılacak resimin adıdır. acikla, acikla1 gibi.

Yine gerekli resimleri yükletmek için aciklaN.src="aciklama.gif"; şeklinde bir kullanım gerekiyor. Burada aciklaN şeklindeki tanımlama önceden tanımladığımız resim adları ile aynı olmalıdır. Mesela acikla.src="aciklam.gif"; acikla1.src="aciklama1.gif" gibi.

Bu resimleri kullanmak için gerekli linke şu şekilde bir ekleme yapıyoruz.

<img src="acikla.gif" name=aciklamaresmi>
<a href="gidilecek_adres.html"
onMouseOver="aciklamaresmi.src=aciklaN.src"
onMouseOut="aciklamaresmi.src=acikla.src">
<img src="buton1.gif">
</a>

Burada açıklama için kullanacağımız resmi yerleştirdik. Sonra linkler için gerekli resimleri ve linkleri giriyoruz. Her link için
onMouseOver="aciklamaresmi.src=aciklaN.src" şeklinde tanımlama ile o link üzerine gelindiğinde aciklamaresmi olarak tanımladığlımız resmin aciklaN.src olarak tanımlacığımız resim ile değişmesini sağlıyoruz. Bu nedenle her link için gerekli açıklama resmi adını doğru kullanın mesela acikla1.src gibi.
onMOuseOut="aciklamaresmi.src=acikla.src" şeklindeki tanımlama mouse linkin üzerinden gittiğinde orjinal giriş resminin görünmesini sağlar.

Şunuda hatırlatayım kesinlikle resim isimlerinde Türkçe karakter kullanmayın.

<html>
<head>
<script>

</script>
</head>

<body>

<table border=0 align=left><tr><td>
<img src="resimler/acikla.gif" width=150 height=50 border=0 name=aciklamaresimi><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla1.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton1a.gif" alt="Programlar"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla2.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton2a.gif" alt="Javascript"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla3.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton3a.gif" alt="Html kursu"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla4.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton4a.gif" alt="Bedava servisler"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla5.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton5a.gif" alt="Background"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla6.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton6a.gif" alt="E-Mail"></a><br>
</td></tr></table>

Sayfa içeriği

</body>
</html>

31.08.2006, 14:37	#1
KaPTaN X Bakan Mesajlar: 370 Puan: 83	Açıklamalı menü 1 Bu menü yardımı ile sayfanızı ziyaret edenlere farklı bir imaj ve bilgi verebilirsiniz. Sayfada her link için bir açıklama resmi ve birde link üzerinde mouse yokken görünecek bir resim olmak zorundadır. Kullacacğınız resimler ve butonların uyumları sayfanın görünüşüne ayrı bir hava katacaktır. Bu scripti kullanırken öncelikle gerekli link sayısı artı bir olacak şekilde resimlerimizi yazırlıyoruz. Bu resimler kadar var aciklaN=new Image(); şeklinde javascripte yeterli miktarda resim alanı açmasını sağlıyoruz. Burada aciklaN şeklinde girdiğimiz değer kullanılacak resimin adıdır. acikla, acikla1 gibi. Yine gerekli resimleri yükletmek için aciklaN.src="aciklama.gif"; şeklinde bir kullanım gerekiyor. Burada aciklaN şeklindeki tanımlama önceden tanımladığımız resim adları ile aynı olmalıdır. Mesela acikla.src="aciklam.gif"; acikla1.src="aciklama1.gif" gibi. Bu resimleri kullanmak için gerekli linke şu şekilde bir ekleme yapıyoruz. <img src="acikla.gif" name=aciklamaresmi> <a href="gidilecek_adres.html" onMouseOver="aciklamaresmi.src=aciklaN.src" onMouseOut="aciklamaresmi.src=acikla.src"> <img src="buton1.gif"> </a> Burada açıklama için kullanacağımız resmi yerleştirdik. Sonra linkler için gerekli resimleri ve linkleri giriyoruz. Her link için onMouseOver="aciklamaresmi.src=aciklaN.src" şeklinde tanımlama ile o link üzerine gelindiğinde aciklamaresmi olarak tanımladığlımız resmin aciklaN.src olarak tanımlacığımız resim ile değişmesini sağlıyoruz. Bu nedenle her link için gerekli açıklama resmi adını doğru kullanın mesela acikla1.src gibi. onMOuseOut="aciklamaresmi.src=acikla.src" şeklindeki tanımlama mouse linkin üzerinden gittiğinde orjinal giriş resminin görünmesini sağlar. Şunuda hatırlatayım kesinlikle resim isimlerinde Türkçe karakter kullanmayın. <html> <head> <script> <!-- gizle var acikla=new Image(); var acikla1=new Image(); var acikla2=new Image(); var acikla3=new Image(); var acikla4=new Image(); var acikla5=new Image(); var acikla6=new Image(); acikla.src="resimler/acikla.gif"; acikla1.src="resimler/acikla1.gif"; acikla2.src="resimler/acikla2.gif"; acikla3.src="resimler/acikla3.gif"; acikla4.src="resimler/acikla4.gif"; acikla5.src="resimler/acikla5.gif"; acikla6.src="resimler/acikla6.gif"; // gizleme sonu --> </script> </head> <body> <table border=0 align=left><tr><td> <img src="resimler/acikla.gif" width=150 height=50 border=0 name=aciklamaresimi><br> <a href="#" onMouseOver="aciklamaresimi.src=acikla1.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton1a.gif" alt="Programlar"></a><br> <a href="#" onMouseOver="aciklamaresimi.src=acikla2.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton2a.gif" alt="Javascript"></a><br> <a href="#" onMouseOver="aciklamaresimi.src=acikla3.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton3a.gif" alt="Html kursu"></a><br> <a href="#" onMouseOver="aciklamaresimi.src=acikla4.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton4a.gif" alt="Bedava servisler"></a><br> <a href="#" onMouseOver="aciklamaresimi.src=acikla5.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton5a.gif" alt="Background"></a><br> <a href="#" onMouseOver="aciklamaresimi.src=acikla6.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton6a.gif" alt="E-Mail"></a><br> </td></tr></table> Sayfa içeriği </body> </html> __________________ DEV OYUN ARSIVI ICIN TIKLA<br /><br />TUM OYUNLARIN HILELERI ICIN TIKLA

Benzer Konular
Konu	Konuyu Açan	Forum	Cevaplar	Son Mesaj
225 Program - Program Açıklamalı (mod-ern'den)	MOD-ERN	Tüm Konular	6	23.01.2008 17:45
Buton menü	KaPTaN X	Scriptler	2	14.11.2007 21:45
java kod... seçmeli açıklama menü örneği	grayder	Scriptler	1	19.11.2006 17:19
Açıklamalı menü 2	KaPTaN X	Scriptler	0	31.08.2006 14:38
Menü çubuğundaki saat görünümünden bıkanlar için	zgenc84	Programlar	1	2.03.2006 00:17

Konu Seçenekleri
Yazdırılabilir Sayfayı Göster Sayfayı E-Mail'le gönder

Konuyu toplam 0 üye ve 1 ziyaretçi okuyor