Frage stellen

Per css Hintergrundbild im div Container per hover austauschen geht im IE 8 nicht?

5.4k Aufrufe
Gefragt in Webseiten HTML von halfstone Profi (18.1k Punkte)
Hi,

ich versuche gerade vergeblich Hindergrundbilder per css in einem DIV Container auszutauschen, das Ganze wenn man mit der Maus über den Container kommt, also einen Hover- oder Mouseovereffekt.

Nicht ganz vergeblich aber wie so oft funktioniert es im Firefox und im IE nicht.

Ich hab schon gelesen, dass der IE das vor Version 6 sowieso nicht kann, aber bei mir geht es anscheinend so wie ich es mache auch nicht im IE 8.

Hier also der Code, der Einfachheit halber auf einer Seite, die Grafiken sind online, daher kann es jeder selber ausprobieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Hintergrund Mouseover</title>
<style type="text/css">
div.frog {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www.jamaipa.de/box_grad.gif) repeat-x scroll left bottom;
border:1px solid #DDDDDD;
color:#02587E;
margin:0.2em 0;
padding:0em;
width: 492; hight: 150
}
div.frog:hover {
background-image: url(http://www.jamaipa.de/box_grad_o.gif);
}
</style>

</head>

<body>

<div class="text frog" ><a href="#">Link</a></div>

</body>
</html>



Ist alles noch nicht wirklich ausgegoren, aber solange das im IE nicht geht kann ich es nicht einsetzen.

Vielleicht hat ja jemand von euch einen Tipp.

viele Grüße

fabian

7 Antworten

0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
Hi,

bin schon etwas weiter gekommen, aber hab noch nicht das richtige Ergebnis.

Der IE scheint das auch in den Versionen 7 und 8 nur mit einem Link zu können.

Wenn man den Hovereffekt im css für einen Link definiert dann kann man auch für diesen im IE den Hintergrund austauschen, was für Buttons oder Menüeinträge ausreichend wäre, hier mal ein Beispielcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Hintergrund Mouseover</title>
<style type="text/css">
<!--
a.frog {
display:block;
color:#000;
background-color:#fff;
width:485px;
padding:7px;

margin:10px;
border:1px solid #DDDDDD;
background-image:url(http://www.jamaipa.de/box_grad.gif);
}
a.frog:hover {
display:block;
color:#fff;
background-color:#000;
background-image:url(http://www.jamaipa.de/box_grad_o.gif);
}
-->
</style>
</head>
<body>

<h1>Viele intelligente Buttons</h1>
<p>
<a class= "frog" href="#">Button1</a>
<a class= "frog" href="#">Button2</a>
<a class= "frog" href="#">Button3</a>
<a class= "frog" href="#">Button4</a>
</p>


</body>
</html>


Problem für mich ist jetzt, ich will das nicht für einen Button, also nur für einen per Link definierten Text sondern für mehrere Zeilen Text, die auch noch im selben Kasten verschieden formatiert werden sollen.

Es soll sich also der Hintergrund für den ganzen Kasten per hover oder mouseover ändern in dem dann verschiedene Links und Texte beinhaltet sind.

Bin mir gar nicht mehr so sicher, dass das ohne Java Script zu machen ist.

Über Hilfe bin ich natürlich nach wie vor dankbar.

Viele Grüße

Fabian
0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
Hi,

als Beispiel wie es dann gehen soll und auch geht, im IE sowie auch im Firefox könnt ihr euch diese Seite anschauen:

www.oneview.de/user/rainernickel/url/246255/

Dort sieht man die Googleanzeigen gleich nach der Überschrift "Datenblatt dieser Empfehlung", bei denen kann man im IE wie im FF mit der Maus einen hover-Effekt sehen, der das Bild im Hintergrund austauscht.

Sowas hätte ich auch gerne.

Viele Grüße

Fabian
0 Punkte
Beantwortet von supermax Experte (4.8k Punkte)
Du mußt eventuell den DOCTYPE erweitern auf
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ohne die URL-Angabe rendert der IE möglicherweise noch im "Quirksmodus", wo vieles nicht oder anders funktioniert als im HTML/CSS-Standardmodus.
0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
Hi Supermax,

da wäre ich jetzt nie drauf gekommen!!!

Bei dem ganzen Gegoogle hab ich immer nur die Info gefunden, dass es bis IE 6 eben nicht geht und man es mit Java Script umschiffen muss. Mich hat auch gewundert, dass ich bei den vielen Versionen, die ich ausprobiert habe nie geklappt hat, vielleicht sollte man nicht so alte html Editoren verwenden wie ich ;-(

Vielen Dank für die schnelle Hilfe, das war die Lösung!

Gruß Fabian
0 Punkte
Beantwortet von supermax Experte (4.8k Punkte)
Freut mich dass ich helfen konnte, habe mich selbst lang und oft genug mit den Absonderlichkeiten des Internet Explorers rumschlagen müssen :/
0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
ja Supermax,

eigentlich wollte ich das aus genau diesem Grund gar nicht selber machen, aber manchmal verrennt man sich ja in eine Problemstellung und denkt immer, man ist nur noch eine Haaresbreite von der Lösung entfernt und schwupps sind Stunden vergangen.

Also nochmal vielen Dank, das hat mir sehr viel Zeit gespart.

Gruß Fabian
0 Punkte
Beantwortet von Experte (6.4k Punkte)
Hi,
Du kannst ja auch einfach den html5-doctype verwenden, der lässt sich leicht merken und rendert immer im Standardmodus. <!Doctype html>

Agesehen davon hast Du im erstgeposteten Code einen Schreibfehler bei der Höhenangabe gemacht, nämlich "hight" statt "height" und zum anderen hast Du bei beiden die Pixel-Angabe vergessen also z.B. width:492px; hinter height könnte man auch noch ein Semikolon schreiben...

mfg, sup2010
...