| Rahmenfarbe verändern |
Batuf
Pixelschubser
Threadstarter
Beiträge: 16 |
hi
Ich habe eine kleine Gallerie. Die Bilder sind in einer Zeile in einzelnen Zellen platziert. ( ![]() | )
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?
Diese Nachricht wurde geändert von: Batuf |
| Profil
Editieren
Zitieren
|
beule
Otto-Normal-Poster
Beiträge: 91 |
css hover effect
|
| Profil
E-Mail
Editieren
Zitieren
|
Batuf
Pixelschubser
Threadstarter
Beiträge: 16 |
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.
Diese Nachricht wurde geändert von: Batuf |
| Profil
Editieren
Zitieren
|
subjective
Forenheld
Beiträge: 844 |
Im Firefox kann auch der -Tag einen :hover bekommen. Der IE akzeptiert dies nur für . Es bleibt also nur die Möglichkeit im onmouseover/onmouseout die CSS-Klasse des | umzustellen. Man sollte dann immer eine Kante haben - sonst kann die Darstellung "hüpfen".
---
Weaverslave
| |
| Profil
Website
Editieren
Zitieren
|
Batuf
Pixelschubser
Threadstarter
Beiträge: 16 |
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 und dem IE-Problem wusste ich bereits. Weil das leider bei mir auch nicht mit dem Firefox geht.
|  |
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.
Diese Nachricht wurde geändert von: Batuf |
| Profil
Editieren
Zitieren
|
subjective
Forenheld
Beiträge: 844 |
Die Pseudoklassen schreibt man direkt an den eigentlichen Selector - da ist ein Leerzeichen zuviel.
.srpic:hover
---
Weaverslave
|
| Profil
Website
Editieren
Zitieren
|
HoRnominatoR
Mausakrobat
Beiträge: 161 |
| subjective schrieb am 10.10.2005 16:32Es bleibt also nur die Möglichkeit im onmouseover/onmouseout die CSS-Klasse des | umzustellen |
oder halt css-hacks, aber die stinken.
---
get OPERA for free
|
| Profil
E-Mail
Website
Editieren
Zitieren
|
Raven
Pixelschubser
Beiträge: 12 |
Hallo,
wenn Du statt ![]()
| ![]() schreibst betrifft der Link auch tatsächlich die Zelle und nicht das Bild und der Hover sollte für die Zelle funktionieren.
Gruß
Raven
Diese Nachricht wurde geändert von: Raven | |
| Profil
Editieren
Zitieren
|
Batuf
Pixelschubser
Threadstarter
Beiträge: 16 |
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 ums herum habe ich schon ausprobiert, geht nicht.
| |
| Profil
Editieren
Zitieren
|
subjective
Forenheld
Beiträge: 844 |
Vor allem wäre ein um das 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 . Diese kann ich dann auch im IE problemlos per JS ändern. Schau mal hier, was da alles so geht.
---
Weaverslave
| |
| Profil
Website
Editieren
Zitieren
|
Batuf
Pixelschubser
Threadstarter
Beiträge: 16 |
Danke, werde ich mir auch noch ansehen.
Aber grad vor ein paar Minuten bin ich über die Lösung gestolpert
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12: |
|
Und dann im diese Funktion per onMouseOver aufrufen:
onMouseOver="changeBorder('1px solid red','myBox')"
Diese Nachricht wurde geändert von: Batuf | |
| Profil
Editieren
Zitieren
|
subjective
Forenheld
Beiträge: 844 |
So ähnlich funktioniert das in der JS-Lösung allerdings wird keine id benötigt.
---
Weaverslave
|
| Profil
Website
Editieren
Zitieren
|
Raven
Pixelschubser
Beiträge: 12 |
Hallo,
| Vor allem wäre ein um das | ganz simpel fehlerhaftes HTML. |
Und warum wäre das fehlerhaftes HTML? Schließlich funktioniert es.
Gruß
Sir Raven
|
| Profil
Editieren
Zitieren
|
subjective
Forenheld
Beiträge: 844 |
Weil eine Tabellenzeile außerhalb der Zellen keine Elemente enthalten darf. gruppiert nur | und | - 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
| | Profil
Website
Editieren
Zitieren
|
Raven
Pixelschubser
Beiträge: 12 |
Hallo,
@subjective: Danke, jetzt bin ich wieder ein Stückchen gebildeter.
Gruß
Raven
| | Profil
Editieren
Zitieren
| |
