Hintergrundfarbe von Tabellenzellen zufällig ändern

Zro · 06.01.2009

Guten Tag allerseits

Ich würde gerne allen Tabellenzellen einer Tabelle die Eigenschaft zuweisen, dass sie die Hintergrundfarbe wechseln sollen, sobald man mit der Maus darüberfährt. Die Farbe soll zufällig aus einer kleinen Auswahl gewählt werden.

Ich habe keine Ahnung, wie ich das anstellen muss, nur den Verdacht, dass ich das über Verhalten machen muss. Da ich da nicht so bewandert bin, will ich euch fragen, wie das funktioniert. Ich habe versucht, einer Tabellenzelle ein Verhalten aufzudrücken, doch da kriege ich die Fehlermeldung, dass ich dem Element zuerst eine ID zuweisen muss, damit das überhaup geht. Nur weiss ich leider auch nicht, wie man dem Element diese ID zuweist *hüstel*.

Könnt ihr mir einen Tipp geben? Vielen Dank schon mal im Voraus!

Grüsse, Zro

Top_Gun · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

In welcher Sprache willst du das ganze denn machen?

Zro · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Ups, ja, die Angabe fehlt noch, bin ja nicht im Dreamweaver-Forum! Ich arbeite mit Dreamweaver CS3, also arbeite ich mit html und css und ich nehme mal an, dass für die Lösung meines Problems Java-Script angesagt ist. Nur kenne ich mich da überhaupt nicht aus...

Duffman15 · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Ich würds ganz einfach mit PHP und CSS machen:

Code:

<?php
$farben = array("#ffffff", "#000000", "#cccccc");
$farbe = $farben[rand(1,(count($farben)-1))];
?>
<html>
<head>
<style type="text/css">
tr:hover {
     background-color:<?php echo $farbe ?>;
}
</style>
</head>

<body>
     <table>
          <tr>
               <td></td>
          </tr>
     </table>
</body>

Die Vorteile dabei, PHP zu nehemn, sind zum einen, dass man PHP nicht abstellen kann und außerdem sieht das Benutzer später nicht.

Liebe Grüße
Lucas

Top_Gun · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Mit PHP würde man aber keine zufällige Farbe beim drüberfahren sondern lediglich eine zufällige Farbe beim Seiten laden. Also bleibt wohl nur JS...

Top_Gun · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Ach quark...

Mit onmouseover kann man ein JS aufrufen welches aus einem vordefinierten Array in dem die Farben stehen ein zufälliges auswählt und dann die Hintergrundfarbe ändert...

Da braucht man nichts mit onClick und nach ner Zeit und sowas...

Top_Gun · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Stimmt schon, aber wenn er möchte, dass "die Hintergrundfarbe wechseln sollen, sobald man mit der Maus darüberfährt." ist ein onClick Event oder eine Zeitverzögerung nicht das gesuchte...

sokie · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

naja, nun ist das problem ja eindeutig so geschrieben, dass es um das mouseover geht

Zro schrieb:
dass sie die Hintergrundfarbe wechseln sollen, sobald man mit der darüberfährt

(wer lesen kann, hat da schon auch Vorteile), und auch nichts mit intervall oder onclick zu tun hat.

könnte in etwa so aussehen:

Code:

<script type="text/javascript">
//eine Auswahl von Farben...
var farben = new Array("#ff00ff","#0000ff","#00cccc","#ffff00");
  function init() {
    //alle Tabellenzellen...
    var zellen = document.getElementsByTagName("td");
    for (var i = 0; i<zellen.length; i++){
      //sobald man mit der Maus darüberfährt.
      zellen[i].onmouseover = function(){
        //Die Farbe soll zufällig aus einer kleinen Auswahl gewählt werden.
        var num = Math.floor(Math.random()* farben.length);
        //dass sie die Hintergrundfarbe wechseln sollen...
        this.bgColor = farben[num];
      }
    }
  }
</script>

HTML:

<body onload="init()">

Zro · 06.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Wow, danke für die vielen Antworten!

Sokie und Top_Gun haben genau richtig erkannt, worum es mir geht und sokies Code sieht prima aus. Damit werde ich mal rumprobieren, sobald ich dazu komme. Vielen Dank dafür!

Grüsse, Zro

Edit: Habe den Code von sokie ausprobiert und er funktioniert genauso, wie ich es wollte! Vielen Dank!

Zro · 10.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Nun habe ich doch noch eine weitere Frage:

Ist es möglich, Schrift-Stil, -Grösse und -Farbe zufällig ändern zu lassen bei mouseover?

Haut mir nicht den Kopf ab, ich weiss, dass dies eine ähnliche Frage wie oben ist. Ich habe versucht, einen JS-Code zu basteln, aber er will nicht funktionieren. Das Problem fängt schon damit an, dass ich nicht mal weiss, wie ich über document.getElementsByTagName("?") das Geschriebene in einer Zelle angeben kann.

Versteht ihr, was ich meine?

Beispiel: Ich habe eine Tabelle mit einer Spalte und drei Zeilen. In jeder der drei Zellen steht ein anderes Wort. Diese drei Worte sollen auf zufällige Weise ihre Schrift-Grösse und -Farbe wechseln bei mouseover, jedes unabhängig von den anderen. Die Worte sind aber keine Links. Ist so etwas überhaupt möglich?

Grüsse, Zro

bigpaul · 10.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

ja das geht.
Du gibst den einzelnen Zellen ids. also zelle1: z1, zelle2: z2, zelle3: z3
Dann:
document.getElementById("z1").style.color = hierDeineZufälligErzeugteFarbe;
document.getElementById("z1").style.fontSize = hierDeineZufälligErzeugteSchriftgröße;
Das für alle zellen durchlaufen lassen, fertig.

Edit: Du musst natürlich für jede Zelle die Farbe&Schriftgröße neu zufällig erzeugen. Und das erzeugen geht praktisch wie oben schon erklärt, nur bei der Schriftgröße stehen im Array halt Schriftgrößen.

Zro · 11.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Danke dir, bigpaul, für die Antwort. Leider bin ich, wie oben schon erwähnt totale Anfängerin, was JS betrifft. Ich habe probiert, mir etwas aus sokies Code und deiner Antwort zusammenzubasteln, aber ich mache wahrscheinlich völlig bekloppte Fehler und stehe nun total im Schilf...

Habe auch nach meinem Problem gegoogelt und mich ein bisschen auf der SELFHTML-Seite eingelesen, was ich noch eingehender machen werde, doch im Moment habe ich dafür eigentlich gar keine Zeit... Ich muss für ein Studienprojekt recht schnell zum funktionierenden Code kommen...

Kannst du mir sagen, was ich falsch mache?

Hier mein Test-Code (nicht auslachen, bitte!)...

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Schriftfarbwechsel</title>

<style>
<!--
body {
    margin-left: 60px;
    margin-top: 60px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
<script type="text/javascript">
var schriftfarben = new Array("#000000","#024C07","#071E72","#742987","#871717");
document.getElementById("z1").style.color = schriftfarben;
  function init() {
      //sobald man mit der Maus darüberfährt...
      zelle1[i].onmouseover = function(){
        //Die Schriftfarbe soll zufällig aus einer kleinen Auswahl gewählt werden.
        var num = Math.floor(Math.random()* schriftfarben.length);
        //und die Schriftfarbe wechseln...
        this.style.color = schriftfarben[num];
      }
    }
  }
</script>
<body onload="init()">
<body>
<table width="165" border="0" cellpadding="0" cellspacing="0">
  
  <tr>
    <td width="165" height="20" align="left" valign="top" id="z01">Schrifttest 1</td>
  </tr>
  <tr>
    <td width="165" height="20" align="left" valign="top" id="z02">Schrifttest 2</td>
  </tr>
  <tr>
    <td width="165" height="20" align="left" valign="top" id="z03">Schrifttest 3</td>
  </tr>
</table>
</body>
</html>

stroyer · 11.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

document.getElementById("z1").style.color = schriftfarben; wird bei dir aufgerufen, bevor das Dokument fertig geladen ist. =>Fehler, da z1 noch nicht existiert. Pack es einfach unter function init() rein und ändere es vor allem auf 'z01' Bin ich jetzt so daneben oder wie kommst du auf zelle1....? Was ist zelle1?

Zro · 11.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Hm, ok, danke dir, aber es funktioniert immer noch nicht. zelle1 war natürlich quatsch und noch ein Überbleibsel aus sokies Code für mein erstes Problem.

Mein Code sieht nun so aus:

Code:

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Schriftfarbwechsel</title> <style>  </style> <script type="text/javascript"> var schriftfarben = new Array("#000000","#024C07","#071E72","#742987","#871717"); function init() { //für Zelle01 document.getElementById("z01").style.color = schriftfarben; //sobald man mit der Maus darüberfährt... z01.onmouseover = function(){ //Die Schriftfarbe soll zufällig aus einer kleinen Auswahl gewählt werden. var num = Math.floor(Math.random()* schriftfarben.length); //und die Schriftfarbe wechseln... this.style.color = schriftfarben[num]; } } } </script> <body onload="init()"> <body> <table width="165" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="165" height="20" align="left" valign="top" id="z01">Schrifttest 1</td> </tr> <tr> <td width="165" height="20" align="left" valign="top" id="z02">Schrifttest 2</td> </tr> <tr> <td width="165" height="20" align="left" valign="top" id="z03">Schrifttest 3</td> </tr> </table> </body> </html>

stroyer · 11.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

@Zro:
Also erst einmal ist eine geschwungene Klammer zu viel zu.
Zweitens geht alles, bis auf die Zuweisung der Zufallsfarbe beim Laden. Dafür weist Du aber der farbe ein Array zu. Das ist der Fehler.
Zweitens hätt ich nicht z01.onmouseover genommen, sondern auch document.getElementById('z01').onmouseover. Es kann sein, dass erstere Variante nicht auf allen Browsern läuft.
Dann geht alles.
Übrigens: Ich denke es ist nur ein Fehler beim kopieren, aber <html> fehlt.

@cakalman: Ich denke, das was Du geschrieben hast ist so ziemlich die beste als auch effizieneste Methode.
EDIT: Bis auf ein paar kleine Fehler: erstens darfst du in der onmouseover-Funktion nicht document.getElementById("z1") schreiben (wenn schon z01) sondern stattdessen einfach this. zweitens fehlen die Zufallsattribute beim Laden der Seite.
Alles zusammen hätt ichs dann ungefähr so gemacht:

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Schriftfarbwechsel</title>
<style>
<!--
body {
    margin-left: 60px;
    margin-top: 60px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
<script type="text/javascript">
//eine Auswahl von Farben...
var farben = new Array("#ff00ff","#0000ff","#00cccc","#ffff00");
var schriftgroesse = new Array(12,13,14,15,16,17);
  function init() {
    //alle Tabellenzellen...
    var zellen = document.getElementsByTagName("td");
    for (var i = 0; i<zellen.length; i++){
      //sobald man mit der Maus darüberfährt.
      zellen[i].onmouseover = function(){
        //Die Farbe soll zufällig aus einer kleinen Auswahl gewählt werden.
        var num = Math.floor(Math.random()* farben.length);
        var grosse = Math.floor(Math.random() * schriftgroesse.length);
        this.style.color = farben[num];
        this.style.fontSize = schriftgroesse[grosse];
        //dass sie die Hintergrundfarbe wechseln sollen...
      }
        var num = Math.floor(Math.random()* farben.length);
        var grosse = Math.floor(Math.random() * schriftgroesse.length);
        zellen[i].style.color = farben[num];
        zellen[i].style.fontSize = schriftgroesse[grosse];
    }
  }
</script> 
<body onload="init()">
<body>
<table width="165" border="0" cellpadding="0" cellspacing="0">
  
  <tr>
    <td width="165" height="20" align="left" valign="top" id="z01">Schrifttest 1</td>
  </tr>
  <tr>
    <td width="165" height="20" align="left" valign="top" id="z02">Schrifttest 2</td>
  </tr>
  <tr>
    <td width="165" height="20" align="left" valign="top" id="z03">Schrifttest 3</td>
  </tr>
</table>
</body>
</html>

Die random-Funktion von JS selber ist zwar nicht gut aber besser als nichts.

Zro · 12.01.2009

AW: Hintergrundfarbe von Tabellenzellen zufällig ändern

Grosses Dankeschön an euch, hat mir sehr geholfen!