[CSS] Grafik: Border ändern, wenn Hover über Text

Bernhard_at · 18.01.2006, 09:37

Hallo Leute!

Möchte so wie auf dieser Seite den Rahmen des Bildes ändern, wenn man einen OnMouseOver beim Text macht. Allerdings möchte ich nicht das ganze Bild austauschen, sondern mittels CSS den Rahmen ändern. Ist das mit reinem CSS möglich, oder brauche ich dazu JS?

Danke!

Jupp · 18.01.2006, 09:42

Das ist mMn nicht mit purem CSS möglich... (Evtl. mit CSS3 oder so...?)

Beim hovern des <a> Elements soll sich ja eine Eigenschaft am <img> Element ändern, was nur mit JS geht.

Lasse mich aber gerne eines Besseren belehren

Bernhard_at · 18.01.2006, 09:53

Ok, hab ich fast befürchtet.

Hat jemand ein Script das bei OnMouseOver eine andere ID aus dem Stylesheet zuweist?

webmichl · 18.01.2006, 09:58

Zumindest der Firefox macht bei diesem Konstrukt das gewünschte:

Code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
a img { border: 5px solid white;}
a:hover img { border: 5px solid red } 
-->
</style>
</head>
<body>
<a href="#"><img alt="" src="tpa.jpg" height="100" width="100" />Link</a>
</body>
</html>

Bernhard_at · 18.01.2006, 10:34

@ webmichl
Ja, aber leider nur der Firefox. Im IE 6 tut sich da gar nix. Und leider brauche ich eine Lösung die überall funktioniert.

_______________________

Hab ein bisschen herumprobiert, aber leider funktionierts nicht:

<html>
<head>
<title>Test</title>

<script type="text/javascript">
function imgover(name) {
document.getElementById(name).style.borderColor = "red";
}

function imgout(name){
document.getElementById(name).style.borderColor = "black";
}

</script>

<style type="text/css">

</style>
</head>
<body>

<img src="kl12.jpg" width="100" height="80" name="test" id="picborder">
<br>
<a onMouseOut="javascript:imgout('test')" onMouseOver="javascript:imgover('test')">Test</a>
</body></html>

Boris · 18.01.2006, 10:37

Wieso definierst du nicht simpel für A den Rahmen und änderst diesen?

a.bildrahmen
{
text-decoration: none;
border: 1px solid green;
}

a.bildrahmen:hover
{
border: 1px solid red;
}

<a class="bildrahmen"><img src="bild.jpg" ... /></a>

Bernhard_at · 18.01.2006, 10:41

Weil die Aktion auf die reagiert werden soll, nicht auf dem Bild stattfindet.

Also nochmal:

1. Textlink hover
2. Bildrahmen ändern
3. Textlink kein hover mehr
4. Bildrahmen wieder zurückändern

321 · 18.01.2006, 10:53

Bei genanntem Link ändert sich dre Bildrahmen beo hover des Bildes und des Textes.
Damit das mit CSS ohne JS geht, müssen Bild und Text im gleichen <a> enthalten sein.

webmichl · 18.01.2006, 10:54

Zitat:

Zitat von 321

...Damit das mit CSS ohne JS geht, müssen Bild und Text im gleichen <a> enthalten sein.

Wie bei meinem Beispiel oben

- bei dem der IE aber nicht mitspielt...

Bernhard_at · 18.01.2006, 10:57

@ 321

Außerdem möchte ich es in der Endfassung in einer Tabelle aufspalten. Somit kann ich nicht einen <a> Tag machen.

satre · 18.01.2006, 10:58

Zitat:

Zitat von webmichl

Zumindest der Firefox macht bei diesem Konstrukt das gewünschte:

Code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
a img { border: 5px solid white;}
a:hover img { border: 5px solid red } 
-->
</style>
</head>
<body>
<a href="#"><img alt="" src="tpa.jpg" height="100" width="100" />Link</a>
</body>
</html>

Schönes Konstrukt und in Opera gehts auch. Vielleicht sollte man auf das Release vom IE7 warten.

Bernhard_at · 18.01.2006, 11:02

Also hier die Lösung mit JS:

<html>
<head>
<title>Test</title>

<script type="text/javascript">

</script>
</head>
<body>

<a href='#'><img src="kl12.jpg" width="100" height="80" border="4" name="test" style="border-color:#000000" onMouseOut="javascript:imgout('test')" onMouseOver="javascript:imgover('test')"></a>
<br>
<a href='#' onMouseOut="javascript:imgout('test')" onMouseOver="javascript:imgover('test')">Test</a>
</body></html>

321 · 18.01.2006, 11:25

Zitat:

Zitat von Bernhard_at

@ 321

Außerdem möchte ich es in der Endfassung in einer Tabelle aufspalten. Somit kann ich nicht einen <a> Tag machen.

Alles gibts halt nicht, resp. nur bedingt.
- Wenn die Tabelle ohne Rahmen ist, sieht niemand obs in der gleichen Zelle ist; logisch gehört es eh zusammen.
- mit Rahmen: das Bild in ein Div packen, diesem rechts ein Padding und
rechts einen Border in der Form und Farbe der Tabellen-Border verpassen

Bernhard_at · 18.01.2006, 11:46

Also meine vorher geschriebene Lösung ist anscheinend doch keine. Im Firefox tut sich bei mir leider gar nix (und ja JS ist aktiviert!

).

Weiß keiner eine Lösung die überall funktioniert?

@ 321
Ich habe allerdings zwei Bilder in einer Zeile. Und ich möchte das über eine Tabelle strukturieren.

satre · 18.01.2006, 12:02

Zitat:

Zitat von Bernhard_at

Weiß keiner eine Lösung die überall funktioniert?

Mach doch ne Browserabfrage. Falls IE, benutze die Javascript-Lösung, falls anderer Browser, die CSS-Methode.