Dynamic HTML

Skryptomania

Dynamiczne menu.

1/2/3

Je£li chcesz zobaczyµ skrypt w dzia│aniu to skocz tu.

Dynamiczne menu to skrypt dzia│aj╣cy pod Netscape Navigatorem 4.x oraz Microsoft Explorerem 4.x.Starsze przegl╣darki mog╣ mieµ trudno£ci z wczytwywanie kod≤w dynamic HTML.

Aby zabraµ siΩ do stworzenia dynamicznego menu musimy na pocz╣tek stworzyµ trzy pliki HTML, np: index.html, lewo.html oraz prawo.html.W pliku kt≤ry nazywa siΩ index.html, umie£cimy kod odpowiadaj╣cy za stworzenie ramek:

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="145,*" FRAMEBORDER=0 BORDER=0>
<FRAME NAME="nav" SRC="lewo.html"
SCROLLING=NO MARGINHEIGHT=0 MARGINWIDTH=0>
<FRAME NAME="main" SRC="prawo.html">
</FRAMESET>
</HTML>

Zwr≤µ szczeg≤ln╣ uwagΩ na nazwy poszczeg≤lnych stron (nav i main).Gdy┐ bΩdziesz musia│ je u┐ywaµ w przypadku du┐ej ilo£ci stron zwi╣zanych z dynamicznym menu.

NastΩpn╣ stron╣ jak╣ bΩdziesz tworzy│ bΩdzie strona lewo.html :

<HTML>
<HEAD>
<TITLE>nav</TITLE>
</HEAD>
<BODY>
<IMG SRC="webmenu.gif" BORDER=0>
</BODY>
</HTML>

W powy┐szym kodzie znajdziesz definicjΩ wstawiania obrazka, obrazek ten mo┐esz zobaczyµ na stronie nr 3.
Teraz dodajesz poni┐szy kod javascript w obrΩbie znacznik≤w <HEAD> </HEAD>:

<SCRIPT LANGUAGE="JavaScript">
<!--

NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
isMac = (navigator.appVersion.indexOf("Mac") != -1) ? 1 : 0;
isMenu = (NS4 || (IE4 && !isMac)) ? 1 : 0;

function popUp(){return};
function popDown(){return};
function startIt(){return}

if (!ver4) event = null;
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
menuWidth = 120;
childOverlap = 50;
childOffset = 5;
perCentOver = null;
secondsVisible = .5;
fntCol = "black";
fntSiz = "12px";
fntWgh = "normal";
fntSty = "normal";
fntFam = "sans-serif";
backCol = "#DDDDDD";
overCol = "#FFCCCC";
overFnt = "black";
linHgt = "normal";
borWid = 2;
borCol = "MediumSlateBlue"
borSty = "outset";
imgSrc = "triangle.gif";
imgSiz = 10;
overFnt = "purple"

isLeftNav = true;
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierArrays.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierFrames.js'><\/SCRIPT>");
}
//-->
</SCRIPT>

A teraz parΩ wyja£nie± co oznaczaj╣ poszczeg≤lne polecenia powy┐szego skryptu:

menuWidth = 120; - jest to rozmiar menu
childOverlap = 50;
childOffset = 5;
secondsVisible = .5; - ile sekund bΩdzie widoczne menu gdy u┐ytkownik nie wykazuje ┐adnej aktywno£ci
fntCol = "black"; - kolor czcionki
fntSiz = "12px"; - rozmiar czcionki
fntWgh = "normal";
fntSty = "normal";
fntFam = "sans-serif"; - rodzaj czcionki
backCol = "#DDDDDD"; - t│o menu
overCol = "#FFCCCC"; - t│o pod£wietlone
overFnt = "black"; - kolor czcionki pod£wietlonej
linHgt = "normal";
borWid = 2; - rozmar ramki
borCol = "MediumSlateBlue"
borSty = "outset";
imgSrc = "triangle.gif"; - obrazek w menu
imgSiz = 10; - rozmiar obrazka
overFnt = "purple" - kolor obramowania menu

Teraz dalsza czΩ£µ kodu strony lewo.html:

W obrΩbie znacznik≤w <BODY> </BODY> umie£µ poni┐szy kod:

<a HREF="/" onMouseOver="popUp('elMenu1',event)" onMouseOut="popDown('elMenu1')">
<IMG SRC="webmenu.gif" BORDER=0></a>

A teraz zapisz ca│╣ stronΩ lewo.html i stw≤rz prawo.html.

DefinicjΩ pliku prawo.html znajdziesz na stronie nr 2.

 

Je£li masz jakie£ uwagi to:

 Dane techniczne:

Masz jakie£ w╣ty to malnij do mnie!!!

 Opracowanie graficzne i merytoryczne - Cruger dnia 14 lipiec, 1998.Strona zosta│a opracowana dla przegl╣darek Netscape'a4.x i Explorera4.x w rozdzielczo£ci 800x600 lub wy┐szej.