IE dreht durch bei Rollover Bilder

Status
Nicht offen für weitere Antworten.
E

emonem

Erfahrenes Mitglied
Hallo,
ich hab folgendes Problem das ich nicht gelöst bekomme.
Ich bin gerade dabei ein Bildergallerieseite fertigzustellen in der es ein Rollover effekt gibt wenn man mit der Maus über ein Bild fährt (weißer Rahmen). Ich habe alles in Dreamweaver MX gemacht und es gab auch keine Probleme. Dreamweaver fügt den code selber ein.Mit dem Firefox und Opera wird alles so angezeigt wie ich es will.Mit dem IE klappte es dagegen nicht.
Der hat irgendwie schwierigkeiten die Rollover Bilder zu laden , die kommen nämlich etwas zeitversetzt zum vorschein und anschließend versucht er im noch irgendwie was zu laden wenn man mit der Maus über die Bilder fährt.Aber schaut am besten mal selbst hinein.


http://www.jaded-season.com/sanchez/v2.0/pictures.html


Vielleicht kennt sich jemand mit dem Problem aus und könnte mir weiterhelfen damit es auch im IE klappt. Vielen Dank.
 
Hallo!

1. Der IE lädt die Thumbnails nach dem MouseOut erneut.
2. Warum machst Du es nicht mit CSS anstatt JavaScript?
3. JavaScript + deaktivierte JavaScript = der Effekt ist futsch
3. CSS + deaktivierte JavaScript = der Effekt bleibt
4. mit CSS kannst du dir die zusätzlichen Thumbnails ersparen

Ich habe es mal mit CSS gebastellt, so klappt es auch mit der W3C-Validierung.
Sowohl für HTML als auch für CSS.
Der Hover-Effekt bezieht sich allerdings auf ALLE Links.
Solltest Du es anders haben wollen, musst du mit Klaasen bzw. ID's arbeiten.

Getestet mit IE, Mozilla, Netscape und Opera.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
 
<style type="text/css">
img {border:1px solid #AD0101;}
img:hover {border:1px solid #FFFFFF;}
body,td,th {
font-family: Arial Narrow;
font-size: 10pt;
color: #000000;
}
body {
background-image: url(Bilder/framemedia.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left;
background-color: #AD0101;
margin:27px;
}
</style>
 
<!--[if IE]> 
<style type="text/css">
img {border:0px;}
a {border:1px solid #AD0101;}
a:hover {border:1px solid #FFFFFF;}
</style>
<![endif]-->
 
</head>
<body>
<table border="0" align="center">
<tr>
<td colspan="4"><div align="center">LivePictures 2005</div></td>
</tr>
<tr>
	<td><a href="Media/pics/live/01.html" target="_self"><img src="01_kl.jpg" alt=""></a></td>
	<td><a href="Media/pics/live/02.html" target="_self"><img src="02_kl.jpg" alt=""></a></td>
	<td><a href="Media/pics/live/03.html" target="_self"><img src="03_kl.jpg" alt=""></a></td>
	<td><a href="Media/pics/live/04.html" target="_self"><img src="04_kl.jpg" alt=""></a></td>
</tr>
<tr>
	<td><a href="Media/pics/live/05.html" target="_self"><img src="05_kl.jpg" alt=""></a></td>
	<td><a href="Media/pics/live/06.html" target="_self"><img src="06_kl.jpg" alt=""></a></td>
	<td><a href="Media/pics/live/07.html" target="_self"><img src="07_kl.jpg" alt=""></a></td>
	<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
Gruss Dr Dau
 
Zuletzt bearbeitet:
@Dr Dau: Dem Conditional Comment fehlt die IE-Version - hier größer als Version 5:

Code: 
<!--[if gt IE 5]> 
<style type="text/css">
img {border:0px;}
a {border:1px solid #AD0101;}
a:hover {border:1px solid #FFFFFF;}
</style>
<![endif]-->
greez, maik.l
 
michaelsinterface hat gesagt.:
@Dr Dau: Dem Conditional Comment fehlt die IE-Version - hier größer als Version 5:

Code: 
<!--[if gt IE 5]> 
<style type="text/css">
img {border:0px;}
a {border:1px solid #AD0101;}
a:hover {border:1px solid #FFFFFF;}
</style>
<![endif]-->
greez, maik.l
Zum Vergrößern anklicken....
Hallo!
Könnte man, muss aber nicht.
So wie ich es geschrieben habe, ist es für alle Versionen ab IE5 gültig.
[if IE]: alle Versionen (ab 5.0)

Gruss Dr Dau
 
Hallo,
vielen dank, deine lösung mit CSS einen weißen rahmen um die bilder zu setzten klappt wunderbar und dein code hat mir sehr geholfen zukünftige fehler zu vermeiden.Bin noch nicht allzu lange dabei.
Ein problem habe ich aber noch.Wenn man jetzt auf ein Bild in der gallerie klickt wird es in groß dargestellt. Darunter sind zwei weiße Pfeile die beim rüberfahren schwarz aufleuchten sollen. Naja irgendwie klappt aber der rollovereffekt den ich in dreamweaver gemacht hab nie mit dem IE reibungslos sondern immer zeitversetzt.Hast du dafür veilleicht auch eine Lösungsmöglichkeit wie ich es mit CSS oder so gebacken bekomme das die weißen Pfeileimages beim drüberfahren direkt in die schwarzen geändert werden?
Hier ist nochmal der link

http://www.jaded-season.com/sanchez/v2.0/pictures.html
 
Hallo!

Da die Pfeile ja Bilder sind und somit rechteckig, wird es so wie mit den Thumbnails nicht klappen.
Du könntest aber statt der Bildpfeile auch Textpfeile nehmen.
Siehe hierzu HTML-Zeichenreferenz.
Dass ganze machst Du dann so wie Du es mit "Index" zwischen den Pfeilen gemacht hast.

Gruss Dr Dau
 
Ja das könnte man machen aber das eigentliche Rollover Problem wäre damit nicht behoben.Also auf dieser seite hier http://www.trust-in-me.de/ ist der gleiche quellcode zu finden wie bei mir und da klappt alles wunderbar.Die bilder werden so gewechselt wie sie sollen. Aber bei mir ist irgendwo der wurm drin.Vielleicht hat jemand eine Antwort parat warum der IE die thumbnails nicht so läd wie er es soll.
 
Hallo!

Also ich habe die Seiten mal verglichen, von dir die Seite mit dem 6. Bild.
Als 1. ist am ende vom Body-TAG ein Leerzeichen, das dürfte zwar nicht stören, ich würde es aber trotzdem rausnehmen.
Als 2. ist mir aufgefallen, Du hast DIV-Boxen verwendet, die von dir genannte Seite aber nicht. Nehme auf der 6.html doch mal ALLE DIVs raus, mal sehen was sich dann ergibt
Um dass positioniern kann man sich dann immernoch kümmern.

Gruss Dr Dau
 
Ok hab ich auf der 6.html gemacht. Das Problem ist aber noch da. Die Pfeile werden mit dem IE immer noch zeitverzögert angezeigt.
 
Hallo!

Hmm, dann weiss ich auch nicht weiter, andere mögliche Ursachen konnte ich jedenfalls nicht sehen.
Ich kann mir eigentlich auch nicht vorstellen dass es an der Reaktionszeit vom Webserver liegt, denn so gross sind die Pfeile ja nun wirklich nicht.
Die von dir genannte Seite wird von Strato gehostet.
Andererseits, am IE liegt es ja offensichtlich auch nicht.
Vielleicht fällt ja jemand anderen etwas ein?!

Gruss Dr Dau
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück