|
Dynamischer Bildwechsel mit JavaScript
Wie per CSS geht es auch hier um den dynamischen Bildwechsel, der hier allerdings weiter gehend per JavaScript umgesetzt ist.
Der Aufruf per mouseover soll vereinfacht werden, und im Zweifel sollen auch mehrere Garfiken auf einmal geändert werden können
Entwickelt:
Code:
HTML, CSS
Entwicklung:
Um beim Überfahren eines Links eine Grafik zu ändern, kann man ohne Weiters die gängige Lösung benutzen, wie sie zum Beispiel bei 
selhhtml gezeigt wird.
Bei einer komplexeren Struktur der Menüführung, aber speziell bei einem dynamischen Auslesen der Seite z.B. per PHP und MySQL sollte man dieses Modell vereinfachen um auf komplizierte Abfragen verzichten zu können.
Status:
aktuell
Erklärung:
Die Kommentare sollten Erklärung genug sein,
Der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<meta name="robots" content="index,follow">
<meta name="author" content="Jörg Ahrens">
<meta name="publisher" content="Jörg Ahrens">
<meta name="copyright" content="Jörg Ahrens">
<meta name="date" content="2010-09-04T10:00:00+02:00">
<title>[Gueldensterns Bildwechsel per Javascript]</title>
<script type="text/javascript">
/*************************************
Script von Jörg Ahrens
www.gueldenstern-webdesign.de
Fragen an:
info@gueldenstern-webdesign.de
*************************************/
function Pix(NR,OB)
{
/*
Durchsucht wird nur die erste Kind-
element-Ebene und auch hier nur die
zwei ersten Elemente.
*/
var NodeType = 1;
var SRC = NR;
/*
Es wird eine Grafik angesprochen, die
außerhalb des Links liegt, zB. bei den
Kästen (s. "Kontakt"). Dazu muss der
betreffenden Grafik ein id zugeordnet
werden.
*/
if ( !SRC.src )
{
NodeType = 2;
SRC = SRC.firstChild;
}
/*
Der Knoten hat ein Textelement. Dabei
handelt es sich wohl um ein Leer-
zeichen und/oder einen Zeilenumbruch.
*/
if ( !SRC.src )
{
NodeType = 3;
SRC = SRC.nextSibling;
}
/*
Das img-Element wird auch als zweites
Element nicht erkannt und daher
abgebrochen.
*/
if ( !SRC.src )
{
NodeType = 0;
return false;
}
/*
in der src wird der absolute Link
gespeichert. Daher muss das zusammen-
fügen evt. angepasst werden.
*/
SRC = SRC.src.split('.');
if ( OB === 1 )
{
SRC = SRC[0]+'.'+SRC[1]+'.'+SRC[2]+'_hov.'+SRC[3];
}
else
{
SRC[2] = SRC[2].slice(0,-4);
SRC = SRC[0]+'.'+SRC[1]+'.'+SRC[2]+'.'+SRC[3];
}
/*
Schreiben der neuen src
*/
if ( NodeType === 1 )
{
NR.src = SRC;
return true;
}
if ( NodeType === 2 )
{
NR.firstChild.src = SRC;
return true;
}
NR.firstChild.nextSibling.src = SRC;
return true;
}
</script>
</head>
<body>
<a href=""
onmouseover="Pix(this,1);"
onmouseout="Pix(this,0);">
<img src="BW/btb.png" width="100" height="10">
Bild links</a><br>
<a href=""
onmouseover="Pix(this,1);
Pix(document.getElementById('imgid'),1)"
onmouseout="Pix(this,0);
Pix(document.getElementById('imgid'),0)">
<img src="BW/btb.png" width="100" height="10">
Bild links & unten
</a>
<br>
<br>
<br>
<a href=""
onmouseover="Pix(document.getElementById('imgid'),1)"
onmouseout="Pix(document.getElementById('imgid'),0)">
Bild unten
</a>
<br>
<br>
<br>
<a href=""
onmouseover="Pix(document.getElementById('imgid'),1)"
onmouseout="Pix(document.getElementById('imgid'),0)">
<img id="imgid" src="BW/btb.png" width="100" height="10">
Bild links
</a>
</body>
</html>
|
MAIL