Philipp Hasenfratz: bgcolor von <td> über DOM ändern

Halihallo Forumer

Ich scheitere an Javascript :-(

Es sollte doch möglich sein, über

document.getElementById( 'area'+num ).bgcolor = '#ffffff'

den Background-Farbwert eines <td>'s zu ändern, oder?

---

Wozu? - Habe einige Links als Bilder. Wenn man mit der Maus darüber fährt, soll eine Beschreibung angezeigt werden (neben dem Link, in ein div), bis hier funktioniert auch alles. Hinzu soll jedoch noch unter dem Link eine weisse Linie gezogen werden, das mache ich über eine Tabelle (Links sind auch in dieser Tabelle), wobei ich den Hintergrund der "Linien-Zelle" auf #ffffff setze (transparentes gif nimmt den Farbwert an). Mir ist klar, dass dieses Vorhaben in dieser Form nur ab den 6-er Versionen funktioniert. Für alle anderen, werde ich auf document.all (IE) und document.layer (NS) setzen. Oder habt ihr da bessere/andere Vorschläge?

(ZUR INFO): Wenn ich die Hintergrundsfarbe über DOM ändere, passiert überhaupt nix; die Hintergrundsfarbe ändert _nicht_ => in meinem Beispiel von unten: Die rechte Zelle ist und bleibt schwarz, was auch immer ich mache. Warum???

Um euch den Rattenschwanz an schlechtem HTML zu ersparen, habe ich eine kleine Zusammenfassung geschrieben:

<script>
   function change (num) {
      alert('c: ' + document.getElementById( 'area'+num ).bgcolor );
      document.getElementById( 'area'+num ).bgcolor = '#00ff00';
      alert('c2: ' + document.getElementById( 'area'+num ).bgcolor);
   }
   function reset () {
      alert('r: ' + document.getElementById( 'area1' ).bgcolor );
      document.getElementById( 'area1' ).bgcolor = '#000000';
      alert('r2: ' + document.getElementById( 'area1' ).bgcolor );
   }
</script>

<table>
   <tr>
      <td bgcolor="#a60000">
         <img src="transparent.gif" width="100px" height="75px"
  onMouseOver="change(1);"
  onMouseOut="reset();">
      </td>
      <td width="100px" height="1px" id="area1" bgcolor="#000000">
         <img src="transparent.gif">
      </td>
   </tr>
</table>

Viele Grüsse

Philipp
   *schäm* :-(

  1. Halihallo Forumer

    Hi Philipp

    Es sollte doch möglich sein, über

    document.getElementById( 'area'+num ).bgcolor = '#ffffff'

    den Background-Farbwert eines <td>'s zu ändern, oder?

    ähm, fast, nimm anstatt bgcolor, style.backgroundColor dann sollte das auch funktionieren:
    document.getElementById( 'area'+num ).style.backgroundColor = '#ffffff'

    Um euch den Rattenschwanz an schlechtem HTML zu ersparen, habe ich eine kleine Zusammenfassung geschrieben:

    Danke ;)

    Viele Grüsse

    Philipp

    Grüße aus Oberfranken

    Sven

    *schäm* :-(

    warum denn, jeder hat mal irgendwo angefangen :)

    1. Halihallo Sven

      Na, supi! - Das funktioniert jetzt ja wunderprächtig. Besten Dank Sven!

      Um euch den Rattenschwanz an schlechtem HTML zu ersparen, habe ich eine kleine Zusammenfassung geschrieben:
      Danke ;)

      Ich hoffe du bedankst dich für die Zusammenfassung!? ;)

      *schäm* :-(
      warum denn, jeder hat mal irgendwo angefangen :)

      Nach... trotzdem ;-(( *g*

      Viele Grüsse nach Oberfranken vom Bodensee

      Philipp
         <-- der jetzt das Ganze noch "alte-Browser-fähig" machen muss :-(

  2. Halihallo Forumer

    Ich scheitere an Javascript :-(

    Dauerschaden nicht auszuschliessen...

    ---

    <html>
       <script>
          function change () {
             layer = document.layers[0];
             alert(layer.pageX + ' ' + layer.pageY);
             layer.document.open();
             layer.document.write('byebye');
             layer.document.close();
             layer = document.layers[0];
             alert(layer.pageX + ' ' + layer.pageY);
          }
       </script>
       <table>
          <tr>
          <td><a href="javascript: change();">test</a></td>
          <td><ilayer name="testi">test</ilayer></td>
          </tr>
       </table>
    </html>

    also: Wenn ich auf den schönen link klicke, dann soll der Layer den Inhalt 'byebye' annehmen. Tut er auch, aber: Er wird an die Position 0x0 (nicht sicher, aber...) verschoben (das byebye sieht man gar nicht, oder nur einzelne Pixelreste davon, da es vom Link überdeckt wird [musste auch erst einige <br>'s einfügen, um dies herauszufinden])! - Wo zum H*** sag ich dem NS, dass er den Layer verschieben soll? - Nirgens! - Naja, wär wirklich toll, wenn mich jemand über dieses (IMO unverständliche) Benehmen des NS 4.79 (u. a.) aufklären könnte. pageX und pageY sagen "nach wie vor" das selbe.

    Viele Grüsse

    Philipp

    1. Halihallo Forumer

      Ich scheitere an Javascript :-(

      Dauerschaden nicht auszuschliessen...

      immer noch ;)

      also, ich hab's mal geschafft, dass der Layer an der richtigen Position bleibt. Ich machte einen ilayer an der Position, wo der Text erscheinen soll und einen "normalen" layer irgendwo andert (eg. Ende des Doku). Dann ändere ich den Inhalt des Layers und verschiebe ihn über moveTo(pageX, pageY) an den Ort vom ilayer. Das funktioniert wunderbar.
      Aber, als ich dann das ganze in die "Test-Umgebung" 1:1 eingefügt habe, hatte ich wieder Probleme:

      Die JS-Scripts liegen im <head> - Bereich. Der Layer wie in der Test2 Umgebung ganz unten und der ilayer an der richtigen Stelle innerhalb einer <td>-Zelle (wo dann der Text ausgegeben werden soll). Aber nun? - Immer die JS-Fehlermeldung, dass der ilayer nicht existiert (ich spreche ihn über den name="" an). Also: ilayer=document.layers['ilayername'] funktioniert nicht, wenn der ilayer innerhalb der <td>...</td> steht, aber es _funktioniert_, wenn er am Dokumentanfang steht (wo er aber nicht zu stehen hat, da ich den Text nicht dort einfügen will).
      Dann habe ich Testweise die namen ausgeben lassen:

      alert(document.layers.length + ' layers in doc');
            for ( i=0; i < document.layers.length; i++ ) {
               alert(i + ': ' + document.layers[i].name );
            }

      Bei:

      <td rowspan="8" width="100%" height="100%">
                           <ilayer name="ts"></ilayer>
             <div name="shortExplain" id="shortExplain">
             </div>
                        </td>

      gibt er mir nur den "normalen Layer" aus und ein _js_layer_xxx. Wenn ich den <ilayer> ganz oben, nach <body> definiere gibt er mir drei aus:

      den "normalen Layer", den ilayer _mit_ _richtigem_ _namen_ und ein weiterer _js_layer_xxx (was immer das sein mag).

      Kann sich das jemand erklären? - Warum ist der ilayer, wenn er in <td> definiert ist (oder anderes Kriterium, weil er weiter unten im Doku steht? - Oder weil ihm das <div>-Probleme bereitet?), nicht existent?

      Viele Grüsse

      Philipp