✔ Tabellenfelder als Links

[Eistee]

Hi,
hab ne recht einfache Frage, kann sie mir aber trotzdem nicht selbst beantworten.
Ich habe eine Tabelle mit z.B. 4 Feldern erstellt.
Jedes dieser Felder ist 25*25px groß. Und hat die Farbe grün. in den Feldern befindet sich kein Inhalt.
Wenn ich nun mit der Maus über eines dieser Felder fahre, soll die Hintergrundfarbe zu blau wechseln.
Wichtiger aber:
Jedes dieser Felder soll einen klickbaren link darstellen.
Kein Link im Feld, sondern das ganze Feld soll selbst als Link dienen. Wie kann ich sowas realisieren?

 

[schutzgeist]

Hm, spontan würd ich sagen:
2 Grafiken erstellen - eine grün und eine blau (1px groß reicht)
und dann per MouseOver bzw. MouseOut die Grafiken (auf 25*25 gestreckt) austauschen lassen.

 

[Maik]

CSS-Code

td.button
{
width: 25px;
height: 25px;
background: #00DF00;
}

1. Variante - Seite wird in neuem Fenster geöffnet:

<td class="button" onmouseover="this.style.backgroundColor='#0040FF'" onmouseout="this.style.backgroundColor='#00DF00'" onclick="window.open('deine_seite.htm','Fenster')">&nbsp;</td>

2. Variante - Seite wird in gleichem Fenster geöffnet:

<td class="button" onmouseover="this.style.backgroundColor='#0040FF'" onmouseout="this.style.backgroundColor='#00DF00'" onclick="self.location.href='deine_seite.htm'">&nbsp;</td>

 

[Dr Dau]

Hallo!

Wozu Images?
Wozu JS?
Warum nicht CSS?

<style type="text/css">
#navtable a
{
text-decoration: none;
}
.navigation a
{
display: block;
background-color: green;
text-decoration: none;
text-align: center;
height: 25px;
width: 25px;
}
.navigation a:hover
{
display: block;
background-color: blue;
color: #ffffff;
text-decoration: none;
height: 25px;
width: 25px;
}
</style>

<table id="navtable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation">
<a href="seite1.html">&nbsp;</a>
</td>
</tr>
<tr>
<td class="navigation">
<a href="seite2.html">&nbsp;</a>
</td>
</tr>
<tr>
<td class="navigation">
<a href="seite3.html">&nbsp;</a>
</td>
</tr>
<tr>
<td class="navigation">
<a href="seite4.html">&nbsp;</a>
</td>
</tr>
</table>

Das   solltest Du drin lassen, da sonst z.b. Opera nichts anzeigt weil halt nichts in den Zellen ist.

Gruss Dr Dau

 

[Maik]

Wozu JS?
Warum nicht CSS?

Weil Eistee keine klassischen Links in den Tabellenzellen verwenden will:

Wichtiger aber:
Jedes dieser Felder soll einen klickbaren link darstellen.
Kein Link im Feld, sondern das ganze Feld soll selbst als Link dienen. Wie kann ich sowas realisieren?

Da td:hover im IE nicht funktioniert, um die Hintergrundfarbe zu tauschen, ist hierfür, wie auch für die Link-Funktion, ein wenig Javascript erforderlich.


[ editpost 08:24 ]

@Eistee: wenn bei mehreren Tabellenzellen die gleichen Hintergrundfarben getauscht werden sollen, empfehle ich dir folgende Technik:

CSS-Code:

td.normal
{
width: 25px;
height: 25px;
background: #00DF00;
}

td.hover
{
width: 25px;
height: 25px;
background: #0040FF;
}

<td class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'" onclick="">&nbsp;</td>

 

[Dr Dau]

Hallo!

Weil Eistee keine klassischen Links in den Tabellenzellen verwenden will

Eisfee hat nichts von klassisch geschrieben.

Kein Link im Feld, sondern das ganze Feld soll selbst als Link dienen.

Und wenn Du mein Code mal ausprobiert hast, wirst Du sehen dass dort 1. kein Link sichtbar ist, 2. die ganze Zelle ihre Farbe wechselt und 3. dass ganze sogar bei deaktiviertem JS funktioniert.

Statt background-color:farbe; könnte er auch background-image:url(bild.jpg); verwenden.

Verweise (Links) heute noch mit JS zu realisieren ist meiner Meinung nach einfach nur "dumm".
Andere werden sicher der gleichen Meinung sein, da die meisten JS deaktiviert haben.

So lange JS kein Einfluss auf wesentliche Fuktionen nimmt, ist es ja noch ok.
Aber sobald es der Navigation dient bzw. die Erreichbarkeit der Seiten betrifft, gehört JS nurnoch in die Tonne.

Oder lässt Du dir vorschreiben: Du musst den IE nutzen, Du musst JS aktiviert haben, Du musst ActiveX aktiviert haben?
ICH jedenfalls nicht, dann suche ich mir lieber eine andere Seite.
Mit o.g. "Futures" wurde/wird ja bekanntlich genug Unfug mit getrieben.

Gruss Dr Dau

 

[Andreas Späth]

Verweise (Links) heute noch mit JS zu realisieren ist meiner Meinung nach einfach nur "dumm".
Andere werden sicher der gleichen Meinung sein, da die meisten JS deaktiviert haben.

Viele haben Javascript deaktiviert, aber die meisten haben es aktiviert weil sie nichtmal wissen das es Javascript gibt.
Diejenigen die es deaktiviert haben dürften sich auf weniger als 5% belaufen denke ich.

Aber ich stimme zu, Javascript für Zusätzliche Features einsetzen spricht nichts dagegen, allerdings sollte eine Seite auch ohne Javascript funktionieren, ich mach onmouseover in Navigationen immernoch mit Javascript, aber wenn einer kein Javascript aktiviert hat funktioniert die Navigation trotzdem nur eben ohne "aufleuchtende" Menüpunkte.

 

[Gumbo]

Diejenigen die es deaktiviert haben dürften sich auf weniger als 5% belaufen denke ich.

Diverse Statistiken zeigen eher einen Anteil von 10–20%.

 

[Andreas Späth]

Diverse Statistiken zeigen eher einen Anteil von 10–20%.

Ich kenn diese Statistiken, aber andere sagen wieder das Gegenteil weil die Statistiken leider oft nur eine bestimmte Usergruppe repräsentieren.
Bei mir sind es gerademal 2% der User ohne Javascript.

Und die Umfassende Statistik die alle Usergruppen umfasst gibt es ja leider nochnicht

 

[Maik]

Eisfee hat nichts von klassisch geschrieben.

Stimmt, aber ich habe es so umschrieben, da er keine <a>-TAGs als Link in der Tabellenzelle, sondern eben die Tabellenzelle direkt als Links verwenden möchte.

Ob das nun sinnvoll ist oder nicht, möchte ich hier nicht bewerten bzw. kommentieren.

Vielmehr habe ich Eistee einen (unvoreingenommenen) Lösungsweg gezeigt.