bei klick farbe ändern

D

dennislassiter

Erfahrenes Mitglied
Hallo,
ich hab ein kleines Problem.
Ich möchte mein Menü auf der Seite http://www.lyrics2003.de anders positonieren. Undzwar dort, wo jetzt ein kleines Beispiel steht (oben im 1. blauen Balken)
Ich möchte, dass Wenn man auf z.B. Songtexte klickt, das diese Zelle in der Tabelle die Farbe <?=$farbe2;?> einnimmt.
Wenn man dann z.B. auf Lyrics2003 klickt, dass dan Songtexte wieder die ursprüngliche Farbe (<?=$farbe1;?>) hat. Und so weiter halt.
Kann mir jemand helfen???

bye
Dennis
 
Hoi,

in Browsern, deren JavaScript-Engine die Methode getElementsByName() interpretieren kann, ginge das wie folgt:
PHP: 
<script type="text/javascript" language="JavaScript">
<!--

function highlight(high) {
    zellen = document.getElementsByName("menuzelle");
    for (a=0; a<zellen.length; a++) {
        document.getElementsByName("menuzelle")[a].style.backgroundColor="#000000";
        document.getElementsByName("menuzelle")[high].style.backgroundColor="#FF0000";
    }
}

//-->
</script>
wäre das entsprechende JavaScript und die Tabelle müsstest du bspw. wie folgt gestalten:
PHP: 
<table>
  <tr>
    <td name="menuzelle" onClick="highlight(0)">Klick!</td>
    <td name="menuzelle" onClick="highlight(1)">Klick!</td>
    <td name="menuzelle" onClick="highlight(2)">Klick!</td>
    <td name="menuzelle" onClick="highlight(3)">Klick!</td>
    <td name="menuzelle" onClick="highlight(4)">Klick!</td>
  </tr>
</table>
Farben usw. müssten noch angepasst werden...

hth,
Geist
 
Schrieb ich ja:

Mit Browsern die das DOM insoweit unterstützen, dass die getElementsByName()-Methode interpretiert werden kann, klappt das wunderbar, das sind aber nur die der neueren Generation...

Bei Gelegenheit kann ich mal über, sicherlich aufwendigere, Version auch für andere Browser sinnieren. :)

Geist
 
Wenn man die Beispiele von SELFHTML durchgeht, dann stellt man Fest, das IE das unterstützt.
Aber egal.
Bei SelfHTML hab ich schon eine Antwort auf das Problem bekommen.
Trotzdem vielen Dank, und einen guten Rutsch ins neue Jahr!
 
Ich hätt's so gelöst, da muss man nicht jeder Zelle einzeln den Befehlt zuweisen, wenn sowieso die ganze Tabelle dies machen soll.

Code: 
  <HTML>
  <HEAD>
  <script type="text/javascript" language="javascript">
  function init()
    {
    var table = document.getElementById('hover_table');
    cells = table.getElementsByTagName('td');
    for(i=0; i<cells.length; i++)
      {
      cells[i].onmouseover = hover;
      cells[i].onmouseout = normal;
      }
    }
  function hover()
    {
    event.srcElement.className = "hilighted";
    }
  function normal()
    {
    event.srcElement.className = "";
    }
  </script>
  <style type="text/css">
  TABLE TD.hilighted
    {
    background-color: #f0f0ff;
    cursor: hand;
    }
  </style>
  </HEAD>
  <BODY onload="init()">
  <table id="hover_table">
    <tr>
      <td width="120">1</td><td width="120">2</td>
    </tr>
    <tr>
      <td>1</td><td>2</td>
    </tr>
    <tr>
      <td>1</td><td>2</td>
    </tr>
    <tr>
      <td>1</td><td>2</td>
    </tr>
    <tr>
      <td>1</td><td>2</td>
    </tr>
  </table>
  </BODY>
  </HTML>
 
Schöner Vorschlag. :)

Sieht allerdings an folgender Stelle arg nach JScript statt JavaScript aus, so dass es nur der IE interpretieren wird:
PHP: 
cells = table.getElementsByTagName('td'); 
for(i=0; i<cells.length; i++) { 
    cells[i].onmouseover = hover; 
    cells[i].onmouseout = normal; 
}
Geist
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück