Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Bild mit Wechselrahmen funktioniert nicht.





Frage

Hallo! Ich möchte das beim Überfahren eines Bildes mit der Maus der Rahmen sich farblich ändert. Leider funktioniert es mit meinem HTML-Code nicht. Es ändert sich der Rahmen nur auf 3 Seiten. Wer kann mir helfen? Danke, schonmal im Voraus. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Startseite</title> <style type="text/css"> <!-- html, body { font-family: Helvetica, Verdana, Arial; background-color: #F0C048; } #block { position: absolute; margin-top: 90px; margin-left: 70px; } a.bild:link { border:solid 3px #F0C048; } a.bild:visited { border:solid 3px #F0C048; } a.bild:active { border:solid 3px #FFFFFF; } a.bild:hover { border:solid 3px #FFFFFF; } --> </style> </head> <body> <div id="block"> <a class="bild" href="#" target="" title=""><img src="" height="120" width="130" alt="" border="0"></a></div> </body> </html>

Antwort 1 von rfb

versuche

a.bild:link img { border:solid 3px red; }
a.bild:visited img { border:solid 3px red; }
a.bild:active img { border:solid 3px #fff; }
a.bild:hover img { border:solid 3px #fff; }

(also dem Bild im Link den Rahmen zuweisen.)

Dafür unbedingt border="0" aus dem img entfernen.

Übrigens ist das DIV überflüssig, wenn du display:block ergänzt kannst du die Formatanweisungen direkt dem Link geben.

Antwort 2 von Jürgen52

@rfb
Danke für deinen Vorschlag.
Leider funktioniert er nicht so, wie ich es mir vorstelle. Der Rahmen soll aufleuchten, wenn ich das Bild überfahre und nicht nur wenn ich es anklicke.

Antwort 3 von rfb

ach ja, der IE und seine Defizite :(

aber so macht er es auch bei mir:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Startseite</title>
<style type="text/css">
<!--
html, body { font-family: Helvetica, Verdana, Arial;
    background-color: #F0C048;
}

a#bild { position: absolute;
margin-top: 90px;
margin-left: 70px;
}

a#bild:link  { border:solid 3px red; }
a#bild:visited { border:solid 3px red; }
a#bild:active { border:solid 3px #fff; }
a#bild:hover { border:solid 3px #fff; }
-->
</style>
</head>

<body>
<a id="bild" href="#"><img src="bild1.jpg" height="120" width="130" alt=""></a>

</body>
</html>


Antwort 4 von Jürgen52

Hurra!
Ich habe es doch noch selbst herausgefunden. Der CSS muss nur um den Eintrag img { margin-top: 3px; } ergänzt werden. Ich verwende nur den IE. Es wäre gut zu wissen, ob es auch in den anderen Browsern funktioniert.

Danke!

MfG

Antwort 5 von rfb

Zitat:
Ich verwende nur den IE. Es wäre gut zu wissen, ob es auch in den anderen Browsern funktioniert.
Grober Fehler. Installiere dir zumindest Firefox und Opera dazu als Minimal-Test-Umgebung.

Im Opera hast du im Menü Ansicht noch eine Reihe von Einstellungen, um weitere Browser zu simulieren (Textbrowser, Handheld,...).

Zudem empfehle ich die Web Accessibility Toolbar für Opera, damit kannst du noch mehr testen.

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: