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
(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.
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.
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:
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
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.Ich verwende nur den IE. Es wäre gut zu wissen, ob es auch in den anderen Browsern funktioniert.
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.