hi

Ich habe eine kleine Gallerie. Die Bilder sind in einer Zeile in einzelnen Zellen platziert. (<td><img ...></td>)
Um diese Zelle habe ich nun einen schwarzen Rahmen gelegt. Ich möchte nun, wenn man über das Bild fährt, oder die ganze Zelle in der das Bild vorhanden ist, die Rahmenfarbe auf rot wechselt.

Wie ist das am besten zu realisieren? In CSS und/oder per Javascript?

css hover effect

Hover effect für das td? Das geht leider nicht. Sieht sowohl im IE als auch im Firefox falsch aus. Wie gesagt, die Rahmenfärbe des td möchte ich gerne ändern, nicht die des Bildes.

Des Bildes wäre ja einfach, geht aber nicht weil die Bilder nicht alle die selbe Grösse haben. Dadurch würde das ein bisschen chaotisch aussehen.

Im Firefox kann auch der <td>-Tag einen :hover bekommen. Der IE akzeptiert dies nur für <a>. Es bleibt also nur die Möglichkeit im onmouseover/onmouseout die CSS-Klasse des <td> umzustellen. Man sollte dann immer eine Kante haben - sonst kann die Darstellung "hüpfen".

---
Weaverslave

Danke
Ich habe noch folgendes gefunden was in etwa meinem Problem entspricht:

Du kannst das nur per JavaScript machen. Du musst Dazu eine Funktion erstellen (nennen wir sie hier einmal "rahmen_anzeigen()") und in dieser müssen dann die Funktionen für die Änderung der Rahmenfarbe stehen. (genaueres dazu unter SelfHTML -> JavaScript-Methoden) Die Box (ich vermute mal, daß Du die per DIV-Tag erstellst) braucht dann noch den Zusatz "OnMouseOver=rahmen_anzeigen() OnMouseOut=rahmen_verstecken()" und schon müsste das funktionieren

Aber ich weiss jetzt nicht genau, was in der Funktion stehen muss.

Das mit dem :hover für das <td> und dem IE-Problem wusste ich bereits. Weil das leider bei mir auch nicht mit dem Firefox geht.

<td class="srpic"><a href="#"><img src="xyz.jpg" border="0"></a></td>

Und hier der CSS-Teil:
.srpic
{
border:1px solid black;
}

.srpic :Hover
{
border:1px solid red;
}


Da wird mir dann aber nicht der Rahmen der Zelle verändert sondern es wird mir ein roter Rahmen um das Bild gezeichnet.

Die Pseudoklassen schreibt man direkt an den eigentlichen Selector - da ist ein Leerzeichen zuviel.

.srpic:hover

---
Weaverslave

subjective schrieb am 10.10.2005 16:32Es bleibt also nur die Möglichkeit im onmouseover/onmouseout die CSS-Klasse des <td> umzustellen

oder halt css-hacks, aber die stinken.


---
get OPERA for free

Hallo,

wenn Du statt <td><a ...><img ...>
<a ...><td><img ...> schreibst betrifft der Link auch tatsächlich die Zelle und nicht das Bild und der Hover sollte für die Zelle funktionieren.

Gruß
Raven

hi

Das mit der Pseudoklasse direkt an den eigentlich Selektor stimmt, aber das wird nicht fehlerhaft interpretiert wenn man es nicht so macht.

CSS-Hack? Her damit *g*

Das mit dem <a> ums <td> herum habe ich schon ausprobiert, geht nicht.

Vor allem wäre ein <a> um das <td> ganz simpel fehlerhaftes HTML.

Wenn es nicht im FF funktioniert, kann es auch daran liegen, das es nicht genau genug ist.

Ein Beispiel für die JS-Lösung findest du hier.

Es ist allerdings eine sehr alte Seite. Inzwischen bevorzuge ich Listen mit <a>. Diese kann ich dann auch im IE problemlos per JS ändern. Schau mal hier, was da alles so geht.

---
Weaverslave

Danke, werde ich mir auch noch ansehen.

Aber grad vor ein paar Minuten bin ich über die Lösung gestolpert



Und dann im <td id="myBox"> diese Funktion per onMouseOver aufrufen:
onMouseOver="changeBorder('1px solid red','myBox')"

So ähnlich funktioniert das in der JS-Lösung allerdings wird keine id benötigt.

---
Weaverslave

Hallo,

Vor allem wäre ein <a> um das <td> ganz simpel fehlerhaftes HTML.

Und warum wäre das fehlerhaftes HTML? Schließlich funktioniert es.

Gruß
Sir Raven

Weil eine Tabellenzeile außerhalb der Zellen keine Elemente enthalten darf. <tr> gruppiert nur <td> und <th> - mehr nicht.

Dabei spielt es keien Rolle ob der Browser schlau genug ist, das fehlerhafte HTML dennoch einigermaßen nutzbar darzustellen. Tabellen (das Rendering) sind so schon kompliziert genug, da muss man dem Browser nicht noch mehr Steine in den Weg werfen.

---
Weaverslave

Hallo,

@subjective: Danke, jetzt bin ich wieder ein Stückchen gebildeter.

Gruß
Raven