Kompletter Newskasten als Link mit Hover-Effekt?

[Ralf Heumann]

Hallo,

wie auf dem Screenshot zu erkennen, sollen die jeweiligen Info-Kästen komplett anklickbar sein und zu einem Ziel verweisen. Bewegt man die Maus darüber so soll der Border verschwinden (oder einfach weiß werden). Das ganze sollte auch im IE6 funktionieren.

Für moderne Browser hätte ich hier lediglich dem DIV einen Hover-Effekt verpasst und die einzelnen Bilder etc. verlinkt. Das ist im IE leider nicht möglich.

Mein Lösungsansatz war nun, dass der komplette Inhalt der jeweiligen Kästen in einem <a href> gefasst wird. Texte und die Überschrift könnte ich dann leider nicht mehr als <h3> oder <p> definieren, sondern müsste alles in <spans> setzen um valide zu bleiben..

Das funktionierte eigentlich schon, allerdings flackert dann beim IE6 das Hintergrundbild der Überschrift (gelber Verlauf), weil der Browser bei jedem Überfahren von HTML-Elementen das Hintergrundbild neu lädt (Sanduhr ist kurz zu sehen)..

Gibt es hierfür überhaupt einen Lösungsweg, damit es auch im IE aussieht wie es soll - und das ganze auch noch valide ist? :(

verzweifelte Grüße,

Ralf

[Philipp Söhnlein]

Tach,

Für moderne Browser hätte ich hier lediglich dem DIV einen Hover-Effekt verpasst und die einzelnen Bilder etc. verlinkt. Das ist im IE leider nicht möglich.

Bleib bei der Lösung und sorge per JavaScript dafür, dass der IE bei einem onmouseover dem Div Klasse gibt, die dann das selbe macht wie der hover (also den border weg).
Sowas wird zum Beispiel beim Suckerfish verwendet. Such mal entweder danach oder nach iehover, dann solltest du fündig werden.

Ciao
Phil

[Ralf Heumann]

Sowas wird zum Beispiel beim Suckerfish verwendet. Such mal entweder danach oder nach iehover, dann solltest du fündig werden.

Vielen Dank für die Suchbegriffe! Ich wusste nicht nach was ich googlen sollte :)

regards,

Ralf

[shn]

Servus,

Mein Lösungsansatz war nun [...] alles in <spans> [zu] setzen [...]

Ich rate dir davon ab, wegen einer Spielerei die Semantik zu verpfuschen.

Aendere die ID des Containers 'onmouseover' (für optische Hover-Effekte) und lese gleichzeitig das href-Attribut des "Mehr"-Links aus,  um 'onclick' die 'location' zu ändern.

Somit hast du nachwievor vernünftiges Mark-up (zumindest die Möglichkeit dazu ;), anstatt einer span-Suppe, mit aktiviertem Javascript ist quasi der gesamte Container verlinkt und ohne Javascript kann man immernoch auf "Mehr" klicken.

Gruss
Patrick