WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY
Menu-s nápovědou k odkazům
Normální položka
Zobrazeno: 6466

Popis: Menu s nápovědou, při najetí na odkaz.
Funkčnost: IE 5.5 a vyššie
Hodnocení: ****
Následující kód si vložte mezi tagy <HEAD> a </HEAD>. 

<SCRIPT charset="windows-1250" type="text/javascript"> 
<!-- Autor: Patrick Lewis (gtrwiz@aol.com) --> 
<!-- Web: http://www.patricklewis.net --> 
<!-- 

if (document.layers) {navigator.family = "nn4"} 
if (document.all) {navigator.family = "ie4"} 
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"} 

descarray = new Array( 
"Nápověda <B>odkazu</B> 1", 
"Nápověda <B>odkazu</B> 2", 
"Nápověda <B>odkazu</B> 3" 
); 

overdiv="0"; 

function popLayer(a){ 
if(!descarray[a]){descarray[a]="<font color=red>Toto okenko (#"+a+") neni spravne vytvoreno - pridejte popis</font>";} 
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";} 
else {pad="1"; bord="0";} 
desc = "<table cellspacing=0 cellpadding="+pad+" border="+bord+" bgcolor=000000><tr><td>\n" 
+"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n" 
+descarray[a] 
+"\n</td></tr></table>\n" 
+"</td></tr></table>"; 
if(navigator.family =="nn4") { 
document.object1.document.write(desc); 
document.object1.document.close(); 
document.object1.left=x+15; 
document.object1.top=y-5; 
} 
else if(navigator.family =="ie4"){ 
object1.innerHTML=desc; 
object1.style.pixelLeft=x+15; 
object1.style.pixelTop=y-5; 
} 
else if(navigator.family =="gecko"){ 
document.getElementById("object1").innerHTML=desc; 
document.getElementById("object1").style.left=x+15; 
document.getElementById("object1").style.top=y-5; 
} 
} 
function hideLayer(){ 
if (overdiv == "0") { 
if(navigator.family =="nn4") {eval(document.object1.top="-500");} 
else if(navigator.family =="ie4"){object1.innerHTML="";} 
else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";} 
} 
} 

var isNav = (navigator.appName.indexOf("Netscape") !=-1); 
function handlerMM(e){ 
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft; 
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop; 
} 
if (isNav){document.captureEvents(Event.MOUSEMOVE);} 
document.onmousemove = handlerMM; 
//--> 
</SCRIPT> 

Následující kód si vložte mezi tagy <BODY> a </BODY>

<div id="object1" style="position:absolute; background-color:FFFFDD;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;" onmouseout="overdiv=0; setTimeout('hideLayer()',1000)"> 
pop up description layer 
</div> 

<A onMouseOver="popLayer(0)" onMouseOut="hideLayer()" target="vpravo" href="stranka1.html">Odkaz 1</A> 
<BR><A onMouseOver="popLayer(1)" onMouseOut="hideLayer()" target="vpravo" href="stranka2.html">Odkaz 2</A> 
<BR><A onMouseOver="popLayer(2)" onMouseOut="hideLayer()" target="vpravo" href="stranka3.html">Odkaz 3</A>