# IE dreht durch bei Rollover Bilder



## emonem (14. April 2005)

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.


----------



## Dr Dau (14. April 2005)

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.

```
<!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


----------



## Maik (14. April 2005)

@Dr Dau: Dem Conditional Comment fehlt die IE-Version - hier größer als Version 5:


```
<!--[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


----------



## Dr Dau (14. April 2005)

michaelsinterface hat gesagt.:
			
		

> @Dr Dau: Dem Conditional Comment fehlt die IE-Version - hier größer als Version 5:
> 
> 
> ```
> ...


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


----------



## emonem (14. April 2005)

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


----------



## Dr Dau (14. April 2005)

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


----------



## emonem (14. April 2005)

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.


----------



## Dr Dau (14. April 2005)

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


----------



## emonem (14. April 2005)

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.


----------



## Dr Dau (14. April 2005)

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


----------



## emonem (14. April 2005)

DEine Idee mit der reaktionszeit war echt gut.
Hab jetz mal eine testsite mit rollover neu erstellt und die bei 1&1 hoch geladen

http://www.turnhead.net/Untitled-1.htm 

da klappt alles wunderbar

wenn ich diese seite bei all.inkl hochlade dann  der rollover nicht richtig im IE

http://www.jaded-season.com/sanchez/v2.0/Untitled-1.htm

Was kann ich jetzt tun, mich bei meine PRovider beschweren? im Firefox und opera klappt aber alles wie es soll.


----------



## versuch13 (14. April 2005)

Hi, vielleicht hilft es dir wenn du die Bilder vorlädst.



```
<!-- Image-Preloader -->
<script type="text/javascript">
<!--
bgImage = new Image(150,20); // (Grafikweite,-höhe)
bgImage.src = "bgImage.jpg"; // Grafik-URI
//-->
</script>
```
 

 gruß


----------



## Dr Dau (14. April 2005)

Hallo!

Ist ja erstaunlich.
Also ich habe jetzt mal deine letzte Seite auf verschiedenen Hostern gehabt und überall funktioniert es. Darunter war auch ein extrem "ruckeliger" Hoster aus England.
Selbst dort hat es geklappt..... zumindest zwischen den "Hängern".
Dass eine Beschwerde etwas bringt, bezweifel ich.
Eine möglichkeit für die Pfeile würde es aber noch geben, zumindest um es auf ein minimum zu reduzieren.
Mache die Pfeile neu. Und zwar legst Du ein Graustufenbild mit transparentem Hintergrund und 72 DPI Auflösung an. Dort machst Du dann den schwarzen, bzw. weissen Pfeil rein. Den Hintergrund lässt Du weiterhin tarnsparent. Dieses Bild speicherst Du dann als transparentes GIF mit 2 Farben Farbtiefe.
Ergebniss bei mir: 83 Byte.
Dein Pfeil: 13,2 KB
Wobei ich ja nicht weiss welche Schrift Du für den Pfeil genommen hast, darum habe ich einfach den Pfeil aus deinem Bild rauskopiert und in ein neues Projekt eingefügt.
Dementsprechend ist der Pfeil "stuffig" geworden, dürfte aber an der Dateigrösse nichts ändern.

Gruss Dr Dau


----------



## emonem (14. April 2005)

Hab da gerade angerufen und den gesagt was sache ist.Zuerst hat der mich blöd angemacht und meinte das es an meinem script liegt.Dann hat der irgendwie gemerkt das die Bildinformationen falsch übertragen werden und der IE jedesmal deswegen die sense macht. Dann hat der 15 Minuten mit seinem Kollegen irgendwelche Apache Server konfigurationen neu eingestellt und siehe da jetzt klappt so wie es sein sollte.Na entlich hab 2 tage jetzt mit dem Problem verbracht und wenigsten ne unmenge an rollovers gelernt obwohls nicht daran lag.


----------



## Dr Dau (15. April 2005)

Hallo!



			
				emonem hat gesagt.:
			
		

> Hab da gerade angerufen und den gesagt was sache ist.Zuerst hat der mich blöd angemacht und meinte das es an meinem script liegt.


Ist ja auch der einfachste Weg es auf andere zu schieben.  




			
				emonem hat gesagt.:
			
		

> Dann hat der irgendwie gemerkt das die Bildinformationen falsch übertragen werden und der IE jedesmal deswegen die sense macht. Dann hat der 15 Minuten mit seinem Kollegen irgendwelche Apache Server konfigurationen neu eingestellt und siehe da jetzt klappt so wie es sein sollte.


Die vermuttung hatte ich auch schon, ich hätte aber nicht gedacht dass sie sich wegen EINEM Kunden auf Fehlersuche machen.




			
				emonem hat gesagt.:
			
		

> Na entlich hab 2 tage jetzt mit dem Problem verbracht und wenigsten ne unmenge an rollovers gelernt obwohls nicht daran lag.


Lernen kann nie schaden.  
Ausserdem hast Du so ja auch eine Möglichkeit bekommen, wie Du die Vorschauseite je nach Umfang vereinfachen kannst (keine doppelten Thumbnails mehr).

Gruss Dr Dau


----------

