1.Adım:Bu örnekler <HEAD>..</HEAD> tag'lerinin arasına kopyalayın.İstediğiniz resimleri ve linkleri kodlardaki yerlerini bularak gerekli değişiklikleri yapın.
<style>
A:link {text-decoration:none;}
A:visited {text-decoration:none;}
</style>
<script language="JavaScript">
// (C) Copyright Jan Erdmann (JEX-Treme)
var a,b,Bild=99;
function rauf(Zahl,Bordernr,Name)
{
Bild=Zahl;
this.document.bild1.src=Name;
this.document[Bordernr].src="border.gif";
for (a=10; a<=13; a++)
{
b="border"+a;
this.document[b].src="border.gif";
}
}
function runter(Bordernr)
{
this.document[Bordernr].src="trans.gif";
for (a=10; a<=13; a++)
{
b="border"+a;
this.document[b].src="trans.gif";
}
}
function klick()
{
if (Bild==99)
return;
if (Bild==1)
location.href="#";
if (Bild==2)
location.href="#";
if (Bild==3)
location.href="#";
}
</SCRIPT>
Aşağıdaki kodları <body>..</body> tag'lerinin arasına kopyalayaınız.
<TABLE border=0 cellspacing=0 cellpadding=0 width=200>
<TD>
<FONT FACE="Arial" COLOR="#0000FF" SIZE="2"><B>
<A HREF="#" onmouseover="rauf(1,'border0','alien.jpg')" onmouseout="runter('border0')">Link1</A><BR><img src="trans.gif" width=200 height=2 align=top name="border0">
<A HREF="#" onmouseover="rauf(2,'border1','alien2.jpg')" onmouseout="runter('border1')">Link2</A><BR><img src="trans.gif" width=200 height=2 align=top name="border1">
<A HREF="#" onmouseover="rauf(3,'border2','download.gif')" onmouseout="runter('border2')">Link3</A><BR><img src="trans.gif" width=200 height=2 align=top name="border2">
</B></FONT>
</TD>
<TD>
<img src="trans.gif" width=164 height=2 name="border10"><BR>
<img src="trans.gif" width=2 height=92 name="border11"><A HREF="Javascript:klick()"><img src="trans.gif" width=160 height=92 border=0 name="bild1"></A><img src="trans.gif" width=2 height=92 name="border12"><BR>
<img src="trans.gif" width=164 height=2 align=top name="border13">
</TD>
</TABLE>