nicht angemeldet
Hallo Julia,
Guten Abend ;-)
ich denke "morgen" trifft es besser ;-)
Ich möchte in der folgenden Tabelle davon unabhängig welche Zellen der User mit der Maus "überfährt", alle background-Grafiken ändern
Also gleich den Hintergrund der ganzen Tabelle oder einzeln für jede td? (Bei Hintergrundgrafiken macht es ja dann was aus, ob er einmal oder 3 mal dasteht)
sowie das image in der zweiten Zelle.
Soweit kein Problem ;-)
Beim Klick auf irgendeine dieser Zellen soll nur das image in der Mitte geändert sowie eine Funktion ausgeführt werden. Ich bin Anfänger...bitte nehmt Rücksicht bei der Antwort ;-)
<table>
<tr>
<td background="test.gif">
<img src="pic/blank.gif" width="1" height="11">
</td>
<td>
<img src="test2.gif" width="15" height="11">
</td>
<td background="test3.gif">
<img src="pic/blank.gif" width="1" height="11"</td>
</td>
</tr>
</table>
Also, erst einmal müssen wir da ein paar Eventhandler reinbauen. Du meinst die ganze Zeit, dass auf welcher Zelle eine Aktion ausgeführt wird (hovern/klicken) irrelevant sei, also werden wir entsprechend handeln:
<table onmouseover="hover();" onmouseout="out();" onclick="click();">
Fährt der User mit der Maus über die Tabelle, trifft erst einmal onmouseover in kraft, die maus befindet sich auf der Tabelle. Nun wird die Funktion hover() aufgerufen, die wir gleich mal konstruieren werden. Beim Verlassen der Tabelle wird sie wieder in ihren Ursprung zurückversetzt, das wird die Funktion out() übernehmen. Und zuguterletzt dann noch die Funktion click(), die beim klicken auf die Tabelle ausgeführt wird.
So, unser resultierender Code:
<table onmouseover="hover();" onmouseout="out();" onclick="click();" id="tabelle">
<tr>
<td style="background-image:url(test.gif);"><img src="pic/blank.gif" width="1" height="11"></td>
<td><img src="test2.gif" width="15" height="11"></td>
<td style="background-image:url(test3.gif);"><img src="pic/blank.gif" width="1" height="11"></td>
</tr>
</table>
Erst einmal den Syntaxfehler bereinigt ;-), dann noch die Hintergrundgrafiken per CSS eingebunden, da wir sie so auch mit javascript ändern werden, und ein paar leerzeichen gelöscht, die uns später beim zugriff über DOM (document object model) das leben schwer machen könnten.
Ach ja, und die <table> hat eine ID verpasst bekommen, damit wir sie im Script ansprechen könne.
Nun also mal unseren Script. Den packen wir am besten irgendwo so in den <head>, nach dem <title>:
<script type="text/javascript">
<!--
function hover() {
alert("Drüber!");
}
function out() {
alert("Weg!");
}
function click() {
alert("klick!");
}
// -->
</script>
So sieht es dann aus. Das macht natürlich was ganz anderes, und zwar öffnet es kleine Meldungsfensterchen, die wir nicht gebrauchen können ;-) nun aber zurück zum ernst des lebens: Ich schlage vor, wir speichern erst einmal global die Adressen der möglichen Hintergrundgrafiken der Zellen:
var bg_cold = new Array(); // Hintergrundbilder im Standartzusatand (User ist nicht mit der Maus über der tabelle)
bg_cold[0] = "test.gif";
bg_cold[1] = "bild.xyz"; // Welches Hintergrund in der Zelle in der Mitte?
bg_cold[2] = "test3.gif";
var bg_hot = new Array(); // Hingergrundbilder im Hot-Zustand (User ist mit der maus über der Tabelle)
bg_hot[0] = "hot.xyz"; // wenn es alles die gleichen bilder
bg_hot[1] = "hot2.xyz"; // sein sollen, braucht man auch kein
bg_hot[2] = "hot3.xyz"; // array.
So, nun wolltest du doch noch das Bild in der mitte ändern, nicht wahr? Ich schlage da mal ein weiteres Array vor:
var bild = new Array();
bild[0] = new Image();
bild[0].src = "test2.gif";
bild[1] = new Image();
bild[1].src = "testxyz.xyz"; // Das Bild beim Drüberfahren über die Tabelle
bild[2] = new Image();
bild[2].src = "testclick.xyz"; // Das Bild beim Klicken auf die Tabelle
Wir haben hierbei die Bilder gleich geladen, das heißt, der Browser hat sie bereits gespeichert.
So, diese ganzen Variablen-initialisationen kommen am Besten
<script type="text/javascript">
<!--
/// HIER ///
function hover() {
...
hin. Nun aber mal los, sonst werden wir heute nicht fertig ;-)
Also, funktion hover():
function hover() {
var tabelle = eval(document.getElementbyId("tabelle"));
tabelle.firstChild.childNodes[0].style.backgroundImage = bg_hot[0];
tabelle.firstChild.childNodes[1].style.backgroundImage = bg_hot[1];
tabelle.firstChild.childNodes[2].style.backgroundImage = bg_hot[2];
tabelle.firstChild.childNodes[1].firstChild.src = bild[1].src;
}
Schon recht kompliziert, was ;-) ? Also, die Variable tabelle machen wir nur, damit wir nicht überall dieses lästige lange zeugs hinter dem gleichheitszeichen da oben schreiben müssen. Die nächten 3 gleichaussehenden Zeilen greifen jeweils auf die "Kinderknoten" der Tabelle zu. Die Hierarchie in der Tabelle ist etwa die folgende:
<table>
|
+--<TR>
|
+--<TD>
+--<TD>
| |
| +--<IMG>
+--<TD>
Mit "firstChild" gehen wir erst einmal zur <tr>. Dann gehen wir per childNodes[x] zum x-1.ten Kind. Das heißt, childNodes[0] spricht die erste Zelle an. (btw.: Das mit dem DOM-Zeugs ist oftmals kleingefriemel, da könnten fehler passieren, weiß nicht ob das jetzt so geht, solte eigentlich)
Naja auf jeden fall ändern wir dann bei jeder zelle die Hintergrundgrafik auf die oben in den variablen gesetzten werte (wieso haben wir die eigentlich in variablen gespeichert? Naja, ist jetzt auch egal)
Das ganze macht nun out() rückgängig, also:
function hover() {
var tabelle = eval(document.getElementbyId("tabelle"));
tabelle.firstChild.childNodes[0].style.backgroundImage = bg_cold[0];
tabelle.firstChild.childNodes[1].style.backgroundImage = bg_cold[1];
tabelle.firstChild.childNodes[2].style.backgroundImage = bg_cold[2];
tabelle.firstChild.childNodes[1].firstChild.src = bild[0].src;
}
So, nun noch die 3. und letzte funktion beim Anklicken:
function click() {
document.getElementbyId("tabelle").firstChild.childNodes[2].firstChild.src = bild[2].src; // Bild in der mitte geändert
meine_funktion(); // Aufruf deiner Funktion
}
und "meine_funktion();" ist dann noch die Funktion, die du aufrufen lassen wolltest.
So, soweit müsste es jetzt eigentlich gehen, höchstwahrscheinlich wird es das nicht, aber das ist ja auch egal, dafür gibt es das forum 8]
WauWau
ss:) zu:) ls:< fo:~ de:] va:) ch:° n4:# rl:( br:< js:| ie:% fl:| mo:|
WauWau E-Mail: coming soon