Javascript Methode - hat jemand ne Idee?

[Julia]

Guten Abend ;-)
Bin leider nicht so fit mit Javascript und hab folgendes Problem:
Ich möchte in der folgenden Tabelle davon unabhängig welche Zellen der User mit der Maus "überfährt", alle background-Grafiken ändern sowie das image in der zweiten Zelle. 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>

[n i c o]

Guten Abend ;-)

Guten Morgen!

Vorab solltest du wissen, dass dein Vorhaben nicht allen Benutzern der Webseite angezeigt werden kann. Es z.B. durchaus nicht so, dass alle Javascripting aktiviert haben; und das onClick-Event unterstützen nicht alle Browser für alle Elemente.
Vorgehen:

1. jedem Bild einen Namen (name="xy") geben
2. Bildobjekte erzeugen, nach dem Schema
      var neues_bild = new Image();
      neues_bild.src = "pic/dateien/test.gif";
3. Funktion(en) erstellen, die die Bilder wechseln soll(en), nach dem Schema:
     function bildwechsler() {
        document.xy.src = neues_bild.src;
     }
4. Events (onmouseover, onclick) in die entsprechenden HTML-Elemente schreiben und sie deine definierte(n) Funktion(en) aufrufen lassen
   Da funktioniert in modernen Browsern, ist aber nicht sonderlich kompatibel.

Ciao

n i c o

[WauWau]

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

[Tobias Kloth]

Hallo WauWau,

function hover() {
    var tabelle = eval(document.getElementbyId("tabelle"));

für was ist eval?

tabelle.firstChild.childNodes[0].style.backgroundImage = bg_hot[0];

damit weist du dem Element tbody ein Hintergrundbild zu (bzw. im Mozilla dem Text der zwischen <table> und dem ersten <tr> steht, was vermutlich einen Fehler verursacht).

tabelle.firstChild.childNodes[1].style.backgroundImage = bg_hot[1];
    tabelle.firstChild.childNodes[2].style.backgroundImage = bg_hot[2];

damit verursachst du einen Fehler, da weitere Childnodes nicht vorhanden sind (außer du hast mindestens zwie Elemente aus thead, tfoot und tbody angegeben)

Mit "firstChild" gehen wir erst einmal zur <tr>.

nein. firstChild ist bei einer Tabelle wenn kein thead und/oder tfoot angegeben ist immer tbody (dieses Element ist laut http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1 immer einmal vorhanden, dessen Anfang- und Endtags aber optional. Warum document.getElementsByTagName('table')[0].firstChild.nodeName im Mozilla aber #text gibt, weiß ich nicht - vermutlich ist das ja sogar korrekt, wenn zwischen <table> und <tr> Leerzeichen (und oder Zeilenumbrüche) stehen?

Dann gehen wir per childNodes[x] zum x-1.ten Kind. Das heißt, childNodes[0] spricht die erste Zelle an.

die Zeilen stehen dann in
 tabelle.firstChild.childNodes[x]
und die einzelnen Zellen in
 tabelle.firstChild.childNodes[x].childNodes[y]
(im Mozilla eben jeweils ein Element auf der Childachse weiter)

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]

wenn du schon fertige Lösungen postest (ja, ich gebe zu, ich mache das auch manchmal :-)) - dann teste sie doch wenigstens vorher.

Grüße aus Nürnberg
Tobias

[Jürgen Berkemeier]

Hallo Tobias,

Warum document.getElementsByTagName('table')[0].firstChild.nodeName im Mozilla aber #text gibt, weiß ich nicht - vermutlich ist das ja sogar korrekt, wenn zwischen <table> und <tr> Leerzeichen (und oder Zeilenumbrüche) stehen?

Für den Mozilla sind die Leerzeichen bzw. Umbrüche zwischen den Tags auch Knoten, im Gegensatz zum IE. Daher sollte man in Tabellen mit "firstChild" sehr vorsichtig sein. Ich greife auf Tabellenelemente mit

var tab=document.getElementById(Tabellen_Id);
 var tbdy=tab.getElementsByTagName("tbody")[0];
 var zelle=tbdy.getElementsByTagName("tr")[zeilen_nr].getElementsByTagName("td");
 Wert[zeilen_nr][spalten_nr]=zelle[spalten_nr].firstChild.nodeValue;

zu. Wobei man den Umweg über tbody auch überspringen kann.

Gruß, Jürgen

[Tobias Kloth]

Hallo Jürgen,

Warum document.getElementsByTagName('table')[0].firstChild.nodeName im Mozilla aber #text gibt, weiß ich nicht - vermutlich ist das ja sogar korrekt, wenn zwischen <table> und <tr> Leerzeichen (und oder Zeilenumbrüche) stehen?
Für den Mozilla sind die Leerzeichen bzw. Umbrüche zwischen den Tags auch Knoten, im Gegensatz zum IE.

nur - ist wer von den Beiden macht es richtig - oder ist beides richtig?

Daher sollte man in Tabellen mit "firstChild" sehr vorsichtig sein.

das habe ich auch schon gemerkt - deswegen habe ich einfach den Quelltext nicht umgebrochen (der wurde serverseitig generiert) :-)

var zelle=tbdy.getElementsByTagName("tr")[zeilen_nr].getElementsByTagName("td");

die Idee ist gut - einfach mehrfach getElementsByTagName anwenden - da können dann beliebig viel Leerzeichen drinsein, das stört nicht - danke für den Tipp :-)

Grüße aus Nürnberg
Tobias

[WauWau]

Hallo Tobias, hallo Jürgen,

Warum document.getElementsByTagName('table')[0].firstChild.nodeName im Mozilla aber #text gibt, weiß ich nicht - vermutlich ist das ja sogar korrekt, wenn zwischen <table> und <tr> Leerzeichen (und oder Zeilenumbrüche) stehen?
Für den Mozilla sind die Leerzeichen bzw. Umbrüche zwischen den Tags auch Knoten, im Gegensatz zum IE.
nur - ist wer von den Beiden macht es richtig - oder ist beides richtig?

Ok, dieses Leerzeichen-nun-als-child-behandeln-oder-nicht von Browsern ist ja auch allgemein bekannt, deswegen finde ich so ein gefriemel bei solchen dingen auch recht fehleranfällig (was es ja auch ist), vor allem, wenn man es nicht getestet hat sondern einfach getestet hat.

var zelle=tbdy.getElementsByTagName("tr")[zeilen_nr].getElementsByTagName("td");
die Idee ist gut - einfach mehrfach getElementsByTagName anwenden - da können dann beliebig viel Leerzeichen drinsein, das stört nicht - danke für den Tipp :-)

stimmt, gute idee 8]

WauWau

[Jürgen Berkemeier]

Hallo,

stimmt, gute idee 8]

ich "spiele" ja auch gerne mit Tabellen:

http://home.vrweb.de/j.berkemeier/TableSort.html
http://home.vrweb.de/j.berkemeier/uebersetzungsrechner.html

Gruß, Jürgen

[WauWau]

Hallo Jürgen,

http://home.vrweb.de/j.berkemeier/TableSort.html
http://home.vrweb.de/j.berkemeier/uebersetzungsrechner.html

schöne seiten, die JavaScript-Spielchen sind toll. Einige sind zwar sehr prozessorauslastend, aber toll 8]

WauWau