Animiertes Web Menu Teil 3 (script)

[phoenix]

nachdem in Teil 1 die bilder erstellt und diese in Teil 2 in eine html seite eingebunden wurden, widmen wir uns nun im dritten teil dem animieren des menus mittels javascript.

auch hier reicht wieder ein unicode-fähiger texteditor, oder ein beliebiger html-editor.



Step 1:
- die eigentliche animation des menus haben wir schon in teil 1 realisiert, als wir die verschiedenen bilder angelegt haben welche das herzstück der menu-animation sind. nun müssen wir dem menu nur noch beibringen das standartbild eines menupunktes (home.gif) durch die beiden animationen zu ersetzen (home_over.gif/home_out.gif) wenn die maus über den menupunkt bewegt wird (over), bzw. von diesem wieder wegbewegt wird (out).
- dafür brauchen wir javascript. wer denkt das sei nix für ihn, da ihm programmierung zu schwer oder kompliziert oder was auch immer ist, der wird hier eindeutig eines besseren belehrt. ich verzichte auch absichtlich darauf eine grundlegende einführung in die javascript programmierung zu geben, da das den umfang dieses tutorials bei weitem sprengen würde und begnüge mich damit eine einzige javascript-funktion zu schreiben die es ermöglicht x-belibig viele bilder damit auszuwechseln, sowie den aufruf der selbigen. mehr dazu später.
- wir beginnen ganz einfach:

<script type="text/javascript">
</script>

- das ist ein container der dem browser mitteilt, hier kommt ein script. innerhalb dieses containers kommen alle javascript anweisungen die wir benötigen. und das sind herzlich wenige ...
- type="text/javascript" sagt dem browser das der folgende script ein javascript ist. was wie wo warum kann uns egal sein, es tut so was es soll, das ist erstmal die hauptsache.
- mit diesem aufruf beginnt jeder script, ob das nun css, vbscript, javascript ist ...



Step 2:
- nun schreiben wir unsere funktion die wir brauchen um dem menu leben einzuhauchen. eine funktion ist eine ansammlung von codezeilen, die immer und immer wieder verwendet werden kann, ohne das jeweils die gesamten codezeilen erneut geschrieben werden müssen. es reicht jeweils der aufruf der funktion. das macht die programmierung übersichtlicher, spart codezeilen und somit wertvolle kb´s
- eine funktion in javascript hat immer den selben aufbau:

function name(argumente){
    codezeile;
}

- function ist ein festgelegter befehl der dem commandozeileninterpreter, der in jedem webbrowser integriert ist und dafür sorgt den script zu interpretieren, mitteilt hier kommt eine funktion.
- name ist der name der funktion. die kann in der regel lauten wie sie will, wichtig ist höchstens das man keine sonderzeichen verwendet und möglichst treffende namen verwendet, damit man später auch noch versteht was das für ne funktion ist, gerade wenn man mehrere davon verwendet.
- (argumente) sind werte die man an die funktion übergibt. diese kann man, muss man aber nicht übergeben. das ist abhängig davon ob die funktion übergebene werte benötigt, wir benötigen es.
- {} innerhalb dieser beiden klammern kommen sämtliche codezeilen, welche zu der funkion gehören.
- codezeile; jede codezeile wird in javascripit mit einem semikolon abgeschlossen. das ist wichtig. wird das vergessen, gibts fehlermeldungen.



Step 3:
- unsere funktion soll bilder wechseln. also geben wir ihr den namen changePic. das setzen wir nun in die funktion ein:

function changePic(argumente){
    codezeile;
}

- nun heisst unsere funktion changePic und ist über diesen namen aufrufbar, wann immer wir sie benötigen.
- nun gehts ans überlegen was muss die funktion machen, was brauchen wir dafür. die funktion soll bilder auswechseln innerhalb verschiedener img-tags. die tags haben jeweils einen eigenen namen und intern eine eigene nummer. der erste img-tag hat die nummer 0, der nächste die nummer 1 usw. usf. das ist wichtig und hilft uns den code so klein wie möglich zu halten. dadurch kommen wir mit einer einzigen code-zeile javascript aus und können doch in verschiedenen bildcontainern (img-tags) bilder austauschen
- das zweite was wir brauchen sind die namen der einzelnen bilder. diese heissen jeweils anders, bspw. home_over.gif, links_out.gif, etc.
- wir sehen, wir benötigen 2 variable elemente, eines um die nummer oder den namen des img-tags anzusprechen, ein zweites um den bildnamen an die funktion zu übergeben. diese variablen elemente heissen variabeln. davon benötigen wir 2 stück. wir benennen diese beiden num und pic. num enthällt die nummer des bildelements das ausgetauscht werden soll, pic enthällt den namen des bildes. das setzen wir nun in unsere funktion ein. diese sieht nun so aus:

function changePic(num, pic){
    codezeile;
}

- die argumente die an die funktion übergeben werden sind eine ansammlung von variabeln und werden wie wir sehen getrennt durch kommas. unsere funktion ist nun soweit das diese über den namen aufgerufen und mit verschiedenen werten gefüttert werden könnte. mehr dazu später.



Step 4:
- die funktion ist soweit eigentlich schon fertig, zumindest der funktions-container. nun fehlt nur noch die anweisung, was die funktion genau machen soll. die funktion soll bilder innhalb bestehender img-tags austauschen. einen img-tag kann man (geht auch anders) über folgende codezeile ansprechen:

window.document.images[X]

- window.document bedeutet soviel wie innerhalb des aktuellen fensters/dokumentes
- images sind die img-tags.

window.document.images[X]

- bedeutet also das er sich den img-tag in der webseite heraus sucht, der mit der nummer X identisch ist. wie gesagt, der erste img-tag hat die nummer 0, der nächste die nummer 1 und so weiter.

window.document.images[0]

- das würde also den ersten img-tag ansprechen.
- nun brauchen wir noch einen kleinen zusatz. wir brauchen nicht den img-tag, sondern nur dessen pfad, da wir ja nur ein bild austauschen wollen. der pfad eines bildes ist immer in der eigenschaft src (source) enthalten. unsere codezeile sieht nun also so aus:

window.document.images[0].src;

- das spricht den pfad des ersten img-tags an. nun wollen wir aber nicht den ersten, sondern verschiedene ansprechen können. dafür haben wir der funktion beigebracht die variabel num zu akzeptieren um verschiedene img-tags anzusprechen. nun müssen wir die codezeile entsprechend anpassen, damit auch diese nicht ein festgelegtes bildfeld, sondern x-beliebig viele davon ansprechen kann:

window.document.images[num].src;

- nun wird der pfad des bildfeldes angesprochen, das wir der funktion mit der variabel num übergeben. jetzt können wir ganz gezielt jeden einzelnen img-tag in unserer webseite ansprechen. nun fehlt nur noch eine kleinigkeit. der pfad des img-tags soll durch einen neuen pfad ersetzt werden. das geht so:

window.document.images[num].src = "pfad";

- nun wird der pfad des img-tags den wir anwählen durch den pfad den wir neu übergeben ersetzt. nur übergeben wir unseren pfad ja schon an die funktion mit der variabel pic. also brauchen wir lediglich zu schreiben:

window.document.images[num].src = pic;

- jetzt wird der pfad des img-tags num, durch den pfad ersetzt der in der variabel pic steht. SEMIKOLON nicht vergessen!
- die ganze funktion sieht nun so aus:

function changePic(num, pic){
    window.document.images[num].src = pic;
}

- das jetzt noch in den javascript container rein und der komplette javascriptcode sieht dann so aus:

<script type="text/javascript">
function changePic(num, pic){
    window.document.images[num].src = pic;
}
</script>

- und schon sind wir fertig. das ist alles was wir brauchen. nun müssen wir die funktion nur noch aufrufen und die werte übergeben, den rest macht die funktion. kürzer gehts nimmer



Step 5:
- aufgerufen wird unsere funktion über den namen. nach dem namen folgen immer (), um die argumente angeben zu können. auch wenn keine argumente benötigt werden, muss () trotzdem hinter den namen gehängt werden. nach dem () kommt auch immer ein semikolon.

changePic();

- nun haben wir aber noch 2 argumente zu übergeben. nummer und pfad. also kann ein beispielhafter aufruf etwa so aussehen:

changePic(0, 'home_over.gif');

- pfadangaben müssen immer mit hochkomma beginnen/enden!



Step 6:
- damit sind wir eigentlich auch schon fast fertig und können damit beginnen unseren javascript in unsere webseite aus teil 2 einzubauen. dieser gehört in den abschnitt <head></head>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu</title>

<script type="text/javascript">
function changePic(num, pic){
    window.document.images[num].src = pic;
}
</script>

</head>

<body>
<table width="150px"  border="0" cellpadding="0" cellspacing="0">
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="home.gif" id="home" onmouseover="" onmouseout=""></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="poems.gif" id="poems" onmouseover="" onmouseout=";"></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="art.gif" id="art" onmouseover="" onmouseout=""></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="programming.gif" id="programming" onmouseover="" onmouseout=""></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="links.gif" id="links" onmouseover="" onmouseout=""></a></td></tr>
</table>
</body>
</html>

Step 7:
- wenn das alles soweit steht, kommen wir zum letzten abschnitt dieses dritten tutorial-teils. wir haben den aufruf noch nicht eingebaut, das holen wir jetzt nach. der aufruf muss jeweils einmal bei onmouseover="" und onmouseout="" bei jedem img-tags eingebaut werden. für das beispiel mit home, sieht das dann folgendermassen aus:

<img border="0" src="home.gif" id="home" onmouseover="changePic(0, 'home_over.gif')" onmouseout="changePic(0, 'home_out.gif')">

- home ist der erste img-tag, deshalb hat er die nummer 0. bei mouseover wird das over bild eingesetzt, bei mouseout das outbild.
- die img-tags mit den spacern benötigen diese funktion selbstverständlich nicht, sind aber wichtig was die nummer betrifft! home hat nummer 0, poems nummer 2, art nummer 4, etc. die spacer-img-tags haben ebenfalls eine nummer
- die weiteren zeilen sehen dann so aus:

<img border="0" src="poems.gif" id="poems" onmouseover="changePic(2, 'poems_over.gif')" onmouseout="changePic(2, 'poems_out.gif')">
<img border="0" src="art.gif" id="art" onmouseover="changePic(4, 'art_over.gif')" onmouseout="changePic(4, 'art_out.gif')">
<img border="0" src="programming.gif" id="programming" onmouseover="changePic(6, 'programming_over.gif')" onmouseout="changePic(6, 'programming_out.gif')">
<img border="0" src="links.gif" id="links" onmouseover="changePic(8, 'links_over.gif')" onmouseout="changePic(8, 'links_out.gif')">

- und der komplette html code sieht nun so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu</title>

<script type="text/javascript">
function changePic(num, pic){
    window.document.images[num].src = pic;
}
</script>

</head>

<body>
<table width="150px"  border="0" cellpadding="0" cellspacing="0">
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="home.gif" id="home" onmouseover="changePic(0,'home_over.gif');" onmouseout="changePic(0,'home_out.gif');"></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="poems.gif" id="poems" onmouseover="changePic(2,'poems_over.gif');" onmouseout="changePic(2,'poems_out.gif');"></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="art.gif" id="art" onmouseover="changePic(4,'art_over.gif');" onmouseout="changePic(4,'art_out.gif');"></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="programming.gif" id="programming" onmouseover="changePic(6,'programming_over.gif');" onmouseout="changePic(6,'programming_out.gif');"></a></td></tr>
    <tr><td><img src="spacer.gif" height="10px"></td></tr>
    <tr><td><a href="http://www.photoshop-cafe.de"><img border="0" src="links.gif" id="links" onmouseover="changePic(8,'links_over.gif');" onmouseout="changePic(8,'links_out.gif');"></a></td></tr>
</table>
</body>
</html>

nun können wir wieder speichern und ausprobieren. eigentlich sollte jetzt alles einwandfrei funktionieren und das menu soweit bereit sein für den einsatz in einer webseite.
im letzten teil dieses tutorials folgt dann noch ein prelaodscript und ein schlusswort, wo noch kurz auf das thema flash eingegangen wird ...

teil 4 folgt in kürze


(c) copyright 2006 by photoshop-cafe.de

[vektorpixel]

Super Tut! Bin jetzt gerade daran es selber zu probieren ;-). Dazu eine Frage: Sind die Imges-Tags auch mit der ID ansprechbar? (den Namen der wir für jedes Bild vergeben haben) Das JavaScript würde dann so heissen?:

<script type="text/javascript">
function changePic(id, pic){
    window.document.images[id].src = pic;
}
</script>

edit: Ja toll! Es funktioniert tatsächlich! Ist auch sehr gebräuchlich wenn man einen grossen Quellcode hat und nicht zählen möchte wieviele <img> -Tags schon vorher stehen.

[phoenix]

wie du schon selbst gemerkt hast funktioniert es selbstverständlich auch über ID oder NAME