✔ Tabellenfelder als Links

[Eistee]

Nett geiment, aber das beispiel aus o.g. Thread passt bei mir nicht
Es geht hierdrum:

http://www.alkbrueder.de/thwb/calendar.php

Wie ihr sehr befindet sich nicht in jedem Feld auch tatsächlich ein Textlink, dennoch ist jedes feld anklickbar (bei euch wird das nicht funktionieren wehen der Rechtevergabe )
Das Beispiel aus dem anderen Thread hinterlegt ausserdem auch immer nur den Berreich hinter dem Textlink, nicht aber die ganze box, so wie ich es brauche.
Gibt es noch einnen anderen Weg, dass sobald man mit der Maus über ein solches Feld fährt - egal ob sich ein Textlink drin befindet oder nicht - sich der Mauszeiger in eine Hand verwandelt?
Hoffe, ich hab nichts fals verstanden und ihr könnt mir helfen.

 

[saschaf]

Ah ja! Jetzt versteh ich erst mal dein Problem richtig. Da hast du natürlich recht, dass das mit dem Beispiel so nicht funktioniert. Aber ich hab mal noch ne Frage. Wann soll der Text eines Links seinen Hoover-Effekt bekommen? Wenn der Mauszeiger über dem Feld ist oder nur direkt über dem Linktext?

Edit: Den Wechsel der Hintergrundfarbe erkennt man nur, wenn man weis, dass sich da was ändert. Also kannst du (jedenfalls so wies jetzt ist) genausogut drauf verzichten.

 

[Eistee]

Der Text selbst soll ja überhaupt keinen Hover-Effekt bekommen.
Sobald man die Maus auf eines der Felder bewegt (egal ob mit Link oder ohne), soll sich der Mauszeiger für die ganze größe des Feldes in eine Hand verwandeln. Völlig unabhängig von den Links die in manchen der Felder enthalten sind.

 

[Dr Dau]

Hallo!

@Eistee, die Seite kann nicht angezeigt werden.
Aber wenn ich mich nicht täusche, soll es eine art Terminkalender werden?!

Bei meinem Code muss der Text ja auch nicht unbedingt ein Hover Effekt haben, Du müsstest lediglich die Textfarbe ändern.
Also z.b.

.navigation a {color:#FFFFFF;}
und
.navigation a:hover {color:#FFFFFF;}

So ist im Normalzustand und im Hover der Text weiss.

Die Hand beim überfahren einer Zelle bekommst Du mit:

<td style="cursor:hand;">irgendein Text, auch ohne Link</td>

Wenn Du die Hand bei JEDER Zelle haben willst, kannst Du es auch so machen:

<style type="text/css">
td {cursor:hand;}
</style>

Gruss Dr Dau

 

[Maik]

@Eistee: mir erscheint die von dir gewählte Variante des Farbwechsels zu umständlich und vor allem unpraktikabel, wenn du irgendwann mal in der Zukunft die 'dynamische' Hintergrundfarbe verändern möchtest. Denn dann musst du dies für

<td onmouseover="this.style.backgroundColor='#FFFFFF'">

in jeder Seite (= Monat) und jeder einzelnen Tabellenzelle (= Tag) vornehmen :suspekt:


Da du für die Tabellenzellen die CSS-Klasse .cellA mit der 'normalen' Hintergrundfarbe angelegt hast, kannst du doch auch noch eine zweite CSS-Klasse, z.B. .cellA_hover, mit der mouseover -Farbe einrichten, und so beim Überfahren der Zelle die CSS-Klassen tauschen:

CSS-Code

td.cellA
{
background-color: #F5F5FF;
height: 70px;
}

td.cellA_hover
{
background-color: #FFFFFF;
height: 70px;
cursor: hand;
}

HTML-Code

<td class="cellA" onmouseover="this.className='cellA_hover'" onmouseout="this.className='cellA'" valign="top"> ... </td>

Btw, diesen Tipp habe ich dir aber schon in meinem zweiten Posting am 07.05.2005 gegeben ;-]

 

[Gumbo]

Nur in den Browsern Explorer 4–6 Windows, Opera, Explorer 5 Mac, Safari 1.2+ existiert der cursor-Eigenschaftswert hand. In den übrigen erzeugt der Wert pointer den selben Effekt. (Siehe Quirksmode: CSS2 – Cursor styles)

 

[Gumbo]

Noch besser wäre die Trennung von Inhalt und Verhalten:

window.onload = function() {
	var obj = document.getElementById("blah").getElementsByTagName("td");
	for(var i=0; i<obj.length; i++) {
		var c = obj[i];
		if( c.className == "cellA" ) {
			c.onmouseover = new Function("this.className=this.className+'-hover'");
			c.onmouseout = new Function("this.className='"+c.className+"'");
		}
	}
}

.cellA {
	background-color:	#f5f5ff;
}
.cellA:hover,
.cellA-hover {
	background-color:	#fff;
}

Dazu braucht die betreffende Tabelle einfach nur ein weiteres Attribut. (Unglaublich, wie viele Tabellen dort benutzt werden.)

 

[Dr Dau]

Hallo!

Nur in den Browsern Explorer 4–6 Windows, Opera, Explorer 5 Mac, Safari 1.2+ existiert der cursor-Eigenschaftswert hand. In den übrigen erzeugt der Wert pointer den selben Effekt. (Siehe Quirksmode: CSS2 – Cursor styles)

Darum könnte man z.b. folgendes nehmen:

<style type="text/css">
td {cursor:pointer;}
</style>
<!--[if IE]>
	<style type="text/css">
	 td {cursor:hand;}
	</style>
<![endif]-->

Getestet mit IE5.5, Opera 7.54 und Mozilla 1.7.5.

Gruss Dr Dau

 

[Gumbo]

Wieso nicht gleich die bei Quirksmode erwähnte Methode:

.cellA:hover,
.cellA-hover {
	cursor:			pointer;
	cursor:			hand;
}

„User agents must ignore a declaration with an unknown property.“

 

[Dr Dau]

Hallo!

Wieso nicht gleich die bei Quirksmode erwähnte Methode:

.cellA:hover,
.cellA-hover {
	cursor:			pointer;
	cursor:			hand;
}

„User agents must ignore a declaration with an unknown property.“

Weil ich zu faul war/bin den Rest meines ersten Postings auch noch zu ändern.

Gruss Dr Dau