[Javascript] Rollover fehlerhaft im IE

[Chriis]

Liebe ATer,

ich hier fast am verzweifeln...
Ich habe ein, ich nenne es, außergewöhnliches Menü für meine neue Website in Photoshop (CS5) gebaut. Habe alles schön gesliced und für Web optimiert direkt mit HTML exportiert. Dieses exportierte hab ich dann in die Seite eingesetzt.
Da ich bei den jeweiligen Menüpunkten noch einen Rollover-Effekt haben möchte, hab ich direkt über den Dreamweaver (auch CS5) die passende Funktion dafür genutzt:

Im Head steht das JS:

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>



Und hier einmal ein kleiner Auszug aus dem Menü: (ersten beiden Menüpunkte und ein Teil des Layouts drum herum)

<table id="Tabelle_01" width="513" height="431" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6" rowspan="2">
<img src="Bilder/menue_01.jpg" width="227" height="50" alt=""></td>
<td><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Bilder/mo_02.jpg',1)"><img src="Bilder/menue_02.jpg" name="home" width="93" height="39" border="0" id="home" /></a>
</td>
<td colspan="4" rowspan="3">
<img src="Bilder/menue_03.jpg" width="192" height="62" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<img src="Bilder/menue_04.jpg" width="93" height="354" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="Bilder/menue_05.jpg" width="15" height="125" alt=""></td>
<td colspan="4" rowspan="2">
<a href="malen.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('beglmalen','','Bilder/mo_06.jpg',1)"><img src="Bilder/menue_06.jpg" name="beglmalen" width="189" height="46" border="0" id="beglmalen" /></a></td>
<td rowspan="11">
<img src="Bilder/menue_07.jpg" width="23" height="380" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="1" height="12" alt=""></td>
</tr>


Nun aber zu meinem Problem:
Die Seite schaut nun wirklich super aus und funktioniert auch einwandfrei - Auf Safari, Chome, FF etc - aber nicht auf dem Internet Explorer. Bzw. sagen wir mal es funktioniert fehlerhaft...
Die Menüpunkte inkl. Layout wird angezeigt und funktioniert auch teilweise, nur wird fast zufällig einfach mal ein BIld nicht geladen (weißer Kasten) oder nur halb geladen (Streifen). Dieses Problem löst sich nun bei einer Zeigerbewegung von selbst - aber das kann ja nicht Sinn der Geschichte sein...

Kann mir einer von Euch sagen, was da los ist?
Liegt es am JS?
Die Seite muss ja schließlich auch auf dem Internet Explorer funktionieren...

Ich bedanke mich schon mal im Vorraus für jeden Tip

Schönen Abend noch,
Chriis

 

[das_micha]

Moin Chris, das ist leider das alte leid mit dreamweaver. das klappt alles klasse, nur im detail hakt es oft.
ich würde dir persönlich von dieser art der rollover abraten. Versuch das lieber mit css zu lösen. ist nicht nur eleganter, sondern auch zuverlässiger.
kenn jetzt dein layout nicht, aber bei css kann man das preloading problem recht einfach dadurch lösen das in der Grafik beide Zustände drin sind und nur die Position ausgetauscht wird. Dabei ist das Bild ein Hintergrundbild.

Das ist alles auch halb so wild. Gehen wir mal davon aus das dein "Link" 100x20px groß ist. Dann könnte es "quick & dirty" so aussehen:

<a href='meinlink.htm' id='meineLinkId'>mein Link</a>

Das dazugehörige CSS könnte so aussehen:

/* Hauptdefinition für den Knopf */
#meineLinkId{
width: 100px;
height: 0px;
padding-top: 20px;
display: block;
background-image: url(meinButton.jpg);
}

/* RollOver */
#meineLinkId{
background-position: 0px -20px;
}

Und das Spielchen machst Du für jeden Button in deiner Navigation.
hat den positiven Effekt das der Spaß auch ohne Javascript funktioniert.

 

[Chriis]

Hallo das_micha,

vielen Dank für Deine schnelle Antwort!
Echt schlimm, dass Adobe nur wenig liebe zum Detail legt...Ich hatte sowas letztens auch bei Flash. Man zahl so viel Geld für diese Programme und dann sowas... Aber gut...

Ich werde die Möglcihkeit direkt mal ausprobieren!! Hört sich auf jeden Fall sehr gut an!

Ich meld mich, wenns was neues gibt

Viele Grüße und einen schönen (Oster-) Sonntag,
Chriis

 

[das_micha]

Hallo das_micha,

vielen Dank für Deine schnelle Antwort!
Echt schlimm, dass Adobe nur wenig liebe zum Detail legt...Ich hatte sowas letztens auch bei Flash. Man zahl so viel Geld für diese Programme und dann sowas... Aber gut...

Ich werde die Möglcihkeit direkt mal ausprobieren!! Hört sich auf jeden Fall sehr gut an!

Ich meld mich, wenns was neues gibt

Viele Grüße und einen schönen (Oster-) Sonntag,
Chriis

Kein Problem. Wenn Du fragen oder probleme damit hast, dann schrei einfach laut.

Zum Thema Adobe: Ja, grade was Dreamweaver angeht ist es grausam, aber die Zielgruppe ist ja auch ne andere. Ist halt für gestalteriche die mal schnell ne Seite zusammenklicken wollen. Bei Flash ist man leider drauf angewiesen regelmäßig Updates zu ziehen. Hatte ich erst gestern Abend, ganze Auswahloptionen waren nicht da. Nach dem Update war alles chic.

Dir auch noch entspannte Ostern!

 

[Chriis]

Darf ich fragen welchen Editor Du nutzt?

Gruß

 

[das_micha]

na klar. ich arbeite mit netbeans. ist allerdings kein WYSIWYG-Editior wie Dreamweaver. Kannst dir also die Ergebnisse nur im Browser ansehen. Liegt daran das ich sehr viel in PHP und JavaScript arbeite und da ne gute Codeumgebung brauche.