link üzerine gelince değişen resim

SpongeBob · #1 (**permalink**) 2006-12-06, 16:52

haberturk'teki gibi bir script bakıyorum. 7 tane text link var. her linkin üzerine gelince resim o linke göre değişecek. nasıl arayacağımı ne isimle arıyacağımı bilmediğim için bulamadım. yardımcı olursanız sevinirim.

SpongeBob · #2 (**permalink**) 2006-12-06, 21:56

arkadaşlar ben scripti buldum ama bir sorunum var. sadece 1 tabloda kullanabiliyorum bunu. ana sayfada 8 kategori tablosu var, hepsinde aynı kodu kullanamıyorum. kullanınca sadece 1 tablodaki resim değişiyor. diğer tablolardaki linklerin üstüne gelsem dahi.
js bilmiyorum. kusura bakmayın. burda hangi değişkenlerle oynayarak 8 tablodada kullanabilirim. yardımcı olursanız çok sevinirim..
script şöyle:

<head> içine:

Kod:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif")
</script>

linkin üzerine gelince değişecek resmin kodu:

Kod:

<a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a>

ve linklerde şöyle:

Kod:

<a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a>
<a href="f15.htm" onMouseover="changeimage(myimages[1],this.href)">Plane 2</a>
<a href="su27.htm" onMouseover="changeimage(myimages[2],this.href)">Plane 3</a>
<a href="jet.htm" onMouseover="changeimage(myimages[3],this.href)">Plane 4</a>
<a href="boeing.htm" onMouseover="changeimage(myimages[4],this.href)">Plane 5</a>

Mywedding · #3 (**permalink**) 2006-12-06, 22:00

gotolink leri değiştirirsen olabilir..

diğerini , gotolink-2 diye dene bi istersen..

SpongeBob · #4 (**permalink**) 2006-12-06, 22:29

aslında ben şöyle yapıyordum onuda açıyım. head içine 1 kere kopyaladım o kodu. her tablo için 2. bir tane oluşturmadım.

örneğin ilk 2 tabloya yerleştirdiğim kodlar şöyle;
1.tablo:

Kod:

<a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a>

<a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a>
<a href="f15.htm" onMouseover="changeimage(myimages[1],this.href)">Plane 2</a>
<a href="su27.htm" onMouseover="changeimage(myimages[2],this.href)">Plane 3</a>
<a href="jet.htm" onMouseover="changeimage(myimages[3],this.href)">Plane 4</a>
<a href="boeing.htm" onMouseover="changeimage(myimages[4],this.href)">Plane 5</a>

2. tablo

Kod:

<a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a>

<a href="b2_.htm" onMouseover="changeimage(myimages[5],this.href)">Plane 6</a>
<a href="f15_.htm" onMouseover="changeimage(myimages[6],this.href)">Plane 7</a>
<a href="su27_.htm" onMouseover="changeimage(myimages[7],this.href)">Plane 8</a>
<a href="jet_.htm" onMouseover="changeimage(myimages[8],this.href)">Plane 9</a>
<a href="boeing_.htm" onMouseover="changeimage(myimages[9],this.href)">Plane 10</a>

head içindeki kodun son kısmınıda şöyle yapıyordum:

preloadimages("plane1.gif","plane2.gif","plane3.gi f","plane4.gif","plane5.gif","plane6.gif","plane7. gif","plane8.gif","plane9.gif","plane10.gif")

**sempaty** · #5 (**permalink**) 2006-12-06, 23:30

değişkenleri aldığınızı varsayarak;

Kod:

<img src="haber.gif" name="haber" width="300" height="200">
 
<a href="haber-<?=$haberid;?>.html" onmouseover="haber.src='<?=$haberresim;?>';" onmouseout="haber.src='haber.gif';"><?=$haberbaslik;?></a>

<img src="haber.gif" name="haber" width="300" height="200">

<a href="sayfa1.html" onmouseover="haber.src='1.jpg';" onmouseout="haber.src='haber.gif';">Resim 1 olsun</a>
<a href="sayfa2.html" onmouseover="haber.src='2.jpg';" onmouseout="haber.src='haber.gif';">Resim 2 olsun</a>
<a href="sayfa3.html" onmouseover="haber.src='3.jpg';" onmouseout="haber.src='haber.gif';">Resim 3 olsun</a>

örneğini bilgisayarda deneyebilirsiniz. kullanmanız gereken resimler; haber.gif (sabit kalacak resim, logonuz örneğin), 1.jpg, 2.jpg, 3.jpg

ie de denedim, ff da çalışmayabilir..

Mywedding · #6 (**permalink**) 2006-12-06, 23:32

süpersin sempaty :-)

SpongeBob · #7 (**permalink**) 2006-12-10, 16:46

çok teşekkür ettim sempaty, tam aradığım gibi

ff eski versiyonlarını bilmiyom ama ff2'de çalışıyor

**harputlum** · #8 (**permalink**) 2006-12-10, 17:06

www.gezginler.net te javascript kodları vardı. Gezginler.net sadece basit bir örneği vardı.Onu istediğin link sayısına çıkarabilirsin.

**harputlum** · #9 (**permalink**) 2006-12-10, 17:11

işte istediğinine benzer basit bir kod:http://www.gezginler.net/modules/jav...ge/image7.html

**irCoDerS** · #10 (**permalink**) 2008-04-04, 22:26

qörseL olarak bi Anlatim YapSak Acemiyimde

LinkBacks (?) LinkBack to this Thread: http://forum.iyinet.com/html-javascript-css/42554-link-uzerine-gelince-degisen-resim.html
Konuyu Başlatan	For	Type	Tarih
Untitled document	This thread	Refback	2006-12-11 15:07

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
üzerine gelindiğinde değişen resim	yzgulec	Webmaster Genel Konular	5	2008-04-04 22:37
Üstüne gelince değişen buton nasıl yapılır?	SLiM_BoY	Photoshop Paint Shop Pro Corel Freehand	5	2006-06-22 00:19
Kaynak Kodu ve Resimin Üzerine gelince Kaydetme butonu	BEBEX	HTML Javascript CSS	7	2006-06-17 21:50
yazının üzerine gelince farklı resim	yaBgu	HTML Javascript CSS	2	2005-07-25 11:00

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)