Javascript - Html kodları

Aşağıdaki kodları <head> </head> kodları arasına ekleyin.

{codecitation class="brush: xml; gutter: false;" width="500px"}

<style>
.move
{
width:100%;
background-color:#3E5999;
border-bottom:1px solid black;
font-size:14px;
font-family:verdana;
font-color:"#C9D2DC";
text-align:center;
}
.info
{
width:100%;
background-color:#3E5999;
border-top:1px solid black;
font-size:13px;
font-family:verdana;
font-color:"#FFFFFF";
color:"FFFFFF";
}
.panel
{
width:150;
position:absolute;
border:1px solid black;
left:350;
top:200;
font-size:13px;
font-family:verdana;
}
.panel a:visited{color:blue;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}
#panel a.visited{
text-decoration:none;
}
.menu
{
width:100%;
background-color:#96C5AA;
font-size:13px;
font-family:verdana;
}
.bilgi {font-family:arial black, arial;font-size:17px; color:gold; font-weight:bold;}
</style>

<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var over = false;

function MD(e) {
if (over)
{
if (N) {
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}
else {
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
}

function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}

function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>

{/codecitation}

 


Aşağıdaki kodları <body> kodundan sonra istediğiniz bir yere yapıştırın.

{codecitation class="brush: xml; gutter: false;" width="500px"}
<div id="panel" >
<script language="JavaScript">

function getArray(id)

{

var splitarray = link[id].split("|");

return splitarray;

}



function info(i,obj,col)

{



sublink = getArray(i);

infobar = document.getElementById("infob");

infobar.innerHTML = "<font class='bilgi'><i>!</i></font> "+sublink[2];

obj.style.backgroundColor=col;

}



function endi(obj,col)

{

obj.style.backgroundColor=col;

infobar = document.getElementById("infob");

infobar.innerHTML = "<font class='bilgi'><i>!</i></font> Açıklamasını görmek için bir öğe seçin.<br>";

}



var link = new Array();

link[0] = " » ADRES 1|http://link adresi |Açıklama 1";

link[1] = " » ADRES 2|http://www.adres2.com|Açıklama 2";

link[2] = " » ADRES 3|http://www.adres3.com |Açıklama 3";

link[3] = " » ADRES 4|http://www.adres4.com |Açıklama 4";

link[4] = " » ADRES 5 |http://www.adres5.com|Açıklama 5";

link[5] = " » UzmanWeb.Net|http://www.uzmanweb.net |Webmasterların sitesi";



document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=#C9D2DC><b>:: M e n ü ::</b></font></div><div class='menu'><br></div>");

for(i=0;i<link.length;i++)

{

sublink = getArray(i);

document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'#96C5AA')\" style='cursor:hand'> "+ sublink[0] +"</div></a>");

}

document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><font class='bilgi'><i>!</i></font> <br></div>");

</script>

</div>
{/codecitation}

 

Örnek demo için tıklayın >>