Tabelle als Navigation mit Farbwechsel

H

Hannibal

Erfahrenes Mitglied
Ich möcht gerne in einer tabbele also in einer normalen tabelle die hintergrundflächen der zeilen onclick die farbe wechseln lassen und der link sollte dann auch funktionieren wenn ich auf die zeile klicke nicht nur wenn auf den text in der tabelle, jedoch sollte der text die farbe auch ändern..

wie mach ich sowas`? ohne bilder:(
 
document.getElementById("Layer9").style.color = blau
document.getElementById("Layer9").style.hintergrund = blau

Funktioniert, soweit es mir richtig in Erinnerung geblieben ist nur im IE, jedoch nicht im Netscape!

Das ganze rufst Du in Funktonen in JavaScript auf!

Wie es ohne Bilder klappen soll, das auch in den Zellen bei "Klick" reagiert wird, = k.A.

Crono -> wo bist Du ?? Geist???

Korrekturen, Ideen , Vorschläge an meiner Idee erwünscht...
 
PHP: 
<td onclick="location.href='index.php?gbook'" onmouseover="style.backgroundColor='blue'" onmouseout="style.backgroundColor='white'">
<a href="index.php?gbook" class="link_navi">guestbook</a></td>
Man verzeihe mir die etwas lange Codezeile. Aber so läuft es bei mir einwandfrei.

//edit: pardon es ist nicht die farbänderung onclick aber das müsste sich ja anpassen lassen. Zumindest hast du so auch schonmal den Link bei Click auf die Zelle.
 
Zuletzt bearbeitet:
Original geschrieben von THE REAL TOOLKIT
uhhm,sicher dass das mit blau funktioniert? :eek:
Ich tendiere ja doch eher zu blue.
Zum Vergrößern anklicken....

Ja stimmt, mein Fehler, habs aus 'nem Script von mir "geklaut", wo alles in Variablen steht und blau ist eben auch eine der Variablen...

Also ganz klar:

blue
 
@Hannibal: Bitte gewöhn dir mal an, dich etwas deutlicher auszudrücken.

Dann: Wenn ich alles richtig verstanden hab müsste es so geht:
PHP: 
<table style="background-color: #FFFFFF;" id="tabelle"
 onClick="window.document.getElementById('tabelle').style.backgroundColor='#00FF00'";>
<tr>
<td onClick="window.location='http://ziel';">
<a href="" onClick="return false;">Klick den Link</a>
</td></tr></table>

Wenn du die Farbe Hin und Her toggeln willst machst du das Ganze halt in einer Funktion, die zuerst die Farbe mit window.document.getElementById('tabelle').style.backgroundColor prüft und dann demensprechend die Farbe setzt.
 
Original geschrieben von Thomas L.
Wie es ohne Bilder klappen soll, das auch in den Zellen bei "Klick" reagiert wird, = k.A.

Crono -> wo bist Du ?? Geist???
Zum Vergrößern anklicken....
LOL, da is man einmal nicht da ;)

Ok, ich versteh Hannibal so (sorry für die langen Codezeilen):
PHP: 
<table width="300" cellpadding="5" cellspacing="0" border="0" style="background-color:#efefef;">
<tr onMouseOver="this.style.backgroundColor='b3b6c5';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.tutorials.de';">
   <td>**</td>
   <td>Tutorials</td>
   <td>**</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='b3b6c5';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.drweb.de';">
   <td>**</td>
   <td>DrWeb</td>
   <td>**</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='b3b6c5';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.heise.de';">
   <td>**</td>
   <td>Heise</td>
   <td>**</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='b3b6c5';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.google.de';">
   <td>**</td>
   <td>Google</td>
   <td>**</td>
</tr>
</table>
@Hannibal: liege ich richtig?

ciao
 
ja genau an sich meine ich es genau so wie es crono in seinem code hat, nur:

sollte der LinkText aussehen wie ein link und auch Underscored werden und ne andere Farber bekommen dazu kommt dass auf der Tabelle die Hand kommen sollte also Mauszeiger = HANd


wisst ihr wie ich mein?
 
Du kannst in die Zelle einen Link setzten, das Return false, ist nicht zwingend notwendig... Den Cursor ist jetzt auch mit drinnen...
PHP: 
<table width="300" cellpadding="5" cellspacing="0" border="0" style="background-color:#efefef;">
<tr onMouseOver="this.style.backgroundColor='b3b6c5'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.tutorials.de';">
   <td>#</td>
   <td><a href="#" onClick="return false;">Tutorials</a></td>
   <td>#</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='b3b6c5'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.drweb.de';">
   <td>#</td>
   <td><a href="#" onClick="return false;">DrWeb</a></td>
   <td>#</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='b3b6c5'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.heise.de';">
   <td>#</td>
   <td><a href="#" onClick="return false;">Heise</a></td>
   <td>#</td>
</tr>
<tr onMouseOver="this.style.backgroundColor='b3b6c5'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='efefef';" onClick="document.location.href='http://www.google.de';">
   <td>#</td>
   <td><a href="#" onClick="return false;">Google</a></td>
   <td>#</td>
</tr>
</table>
oder du formatierst den Text mit CSS...


bye
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück