Rollover-Images funktionieren nicht mit Netscape
Flo
- browser
0 Claudia0 Klaus Junge0 Flo
Hallo!
Wer kann mir sagen warum dieses Script (erstellt von Dreamweaver 2) für Rollover-Images (mit Imagemaps) mit dem Internet Explorer 4/5 funktioniert, beim Netscape aber nur, wenn man mit dem Mauszeiger entweder am oberen oder unteren Rand der Bilder entlangfährt?
Vielen Dank,
Flo
<SCRIPT language=JavaScript>
<!--
function MM_swapImgRestore() { //v2.0
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}
function MM_preloadImages() { //v2.0
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
function MM_swapImage() { //v2.0
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null)
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null oldArray[j-1]!=obj)?obj.src:oldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
}
//-->
</SCRIPT>
</HEAD>
<BODY background="" bgColor=#b7b7d4 leftMargin=0
onload="MM_preloadImages('Bilder/rollovers/abouton.gif','#929359797630');MM_preloadImages('Bilder/rollovers/produkton.gif','#929359828990');MM_preloadImages('Bilder/rollovers/systemon.gif','#929359844700');MM_preloadImages('Bilder/rollovers/newson.gif','#929359858100');MM_preloadImages('Bilder/rollovers/serviceon.gif','#929359873100');MM_preloadImages('Bilder/rollovers/branchenon.gif','#929979030680')"
topMargin=0 ; marginheight="0" marginwidth="0">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="20" height="7" valign="top"></td>
<td width="1" height="7" valign="top"></td>
<td width="94" height="7" valign="top"></td>
<td width="90" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.about','document.about','Bilder/rollovers/abouton.gif','#929359797630');"><img name="about" border="0" src="Bilder/rollovers/aboutoff.gif" width="90" height="388" usemap="#aboutMap"></a></td>
<td width="126" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.branchenRoll','document.branchenRoll','Bilder/rollovers/branchenon.gif','#929979030680')"><img name="branchenRoll" border="0" src="Bilder/rollovers/branchenoff.gif" width="126" height="388" usemap="#branchenMap"></a></td>
<td width="126" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.produkt','document.produkt','Bilder/rollovers/produkton.gif','#929359828990');"><img name="produkt" border="0" src="Bilder/rollovers/produktoff.gif" width="126" height="388" usemap="#produktMap"></a></td>
<td width="126" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.management','document.management','Bilder/rollovers/systemon.gif','#929359844700');"><img name="management" border="0" src="Bilder/rollovers/systemoff.gif" width="126" height="388" usemap="#manageMap"></a></td>
<td width="84" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.news','document.news','Bilder/rollovers/newson.gif','#929359858100');"><img name="news" border="0" src="Bilder/rollovers/newsoff.gif" width="84" height="388" usemap="#newsMap"></a></td>
<td width="110" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.service','document.service','Bilder/rollovers/serviceon.gif','#929359873100');"><img name="service" border="0" src="Bilder/rollovers/serviceoff.gif" width="110" height="388" usemap="#serviceMap"></a></td>
</tr>
<tr>
<td width="20" height="70" valign="top"></td>
<td width="95" height="70" colspan="2" valign="top">
Hallo Flo,
<kopfschüttel>
für eine Bildwechselfunktion ist das ja ganz schön... ich weiß nicht recht wie ich mich ausdrücken soll.
Mein Rat: Schmeiß den Sch<zensiert> weg und guck mal da hin.
Das ist der Klassiker<g>
<../../tedg.htm>
Schöne Grüße
Claudia
<kopfschüttel>
für eine Bildwechselfunktion ist das ja ganz schön... ich weiß nicht recht wie ich mich ausdrücken soll.
Mein Rat: Schmeiß den Sch<zensiert> weg und guck mal da hin.
Das ist der Klassiker<g>
<../../tedg.htm>
<auch Kopfschuettel />
Schoen mal wieder bestaetigt zu werden, kein Dreamweaver zu benutzen. Ich denke mit einem Zehntel, des Codes schafft man es auch und blickt dann sogar nicht durch(siehe Link von Claudia :-)
Viele Gruesse, Thomas Hieck
Hallo Flo,
Wer kann mir sagen warum dieses Script...
sagen kann ich Dir das zunächst nicht, aber vielleicht kriegt man das raus.
Also Schritt für Schritt.
Da gibt es ein BODY-Tag. Etwas umgestellt sieht der dann so aus:
<BODY
background=""
bgColor=#b7b7d4
leftMargin=0
topMargin=0 ;
marginheight="0"
marginwidth="0"
onload="MM_preloadImages('Bilder/rollovers/abouton.gif', '#929359797630');
MM_preloadImages('Bilder/rollovers/produkton.gif', '#929359828990');
MM_preloadImages('Bilder/rollovers/systemon.gif', '#929359844700');
MM_preloadImages('Bilder/rollovers/newson.gif', '#929359858100');
MM_preloadImages('Bilder/rollovers/serviceon.gif', '#929359873100');
MM_preloadImages('Bilder/rollovers/branchenon.gif','#929979030680')">
Etwas 'uneinheitlich', Werte mal mit Gänsefüßchen, mal ohne und
noch mit einem Semikolon dazwischen...
Welcher Browser geht wie krüsch damit um?
Vielleicht weß jemand darauf eine Antwort.
Wichtiger für das Funktionieren ist aber, daß onload für jedes Bild die
Funktion MM_preloadImages() mit zwei Parametern aufgerufen wird.
Der erste Parameter dürfte klar sein, ich nehme jedenfalls an, daß das
Deine Bilder sind. Die Namen hören alle mit 'on' auf, woraus ich
schließe, daß es die Zustände für onMouseover sind.
Naja, ist ja wohl auch trivial, die Anfangsbilder werden ja mit der
Endung 'off' unten in den Ankern referenziert.
Der zweite Parameter ist mir unklar. Jeweils eine ellenlange Zahl,
vorne immer gleich. Aus der Raute schließe ich, daß sie als Hex-Zahl
zu interpretieren ist. Mal sehen.
Tja, dann gibt es noch diese Funktion:
function MM_preloadImages()
{ //v2.0
if (document.images)
{
var imgFiles = MM_preloadImages.arguments;
if (document.preloadArray==null)
document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document)
for (var j=0; j<imgFiles.length; j++)
if (imgFiles[j].charAt(0)!="#")
{
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
}
}
}
Zunächst fällt mir auf, daß die Klammern leer sind, obwohl Parameter
übergeben werden. Bei anderen 'Sprachen' eine Totsünde die mit einem
Compilerfehler quitiert wird. Naja, das W3C hat sich Toleranz gewünscht.
Mit 'if (document.images)' soll wohl verhindert werden, daß der IE3
oder sonst ein älterer Browser eine Fehlermeldung ausgibt.
Mit 'var imgFiles = MM_preloadImages.arguments;' wird zunächst mal
eine Variable namens 'imgFiles' definiert und auf den Wert
'MM_preloadImages.arguments' gesetzt. Hmm, den gibt es doch noch garnicht.
Ob der sich damit schon ein Objekt baut? Mal sehen.
Dann, mit 'if (document.preloadArray==null) document.preloadArray = new Array();'
schaut er ob es ein Array 'preloadArray' noch nicht gibt und macht es sich
gegebenenfals mit 'document.preloadArray = new Array();'.
Anschließend deklariert er sich eine Variable i in der die Länge dieses
Arrays drinsteht: 'var i = document.preloadArray.length;'
Dann kommt eine Schleife, von Null bis Arraylänge von imgFiles.
imgFiles hatte er sich oben als Variable deklariert. Hmm.
Nun rödelt er das Array also durch und schaut bei jedem [j] nach
ob der Inhalt NICHT mit der Raute anfängt, also anzunehmen ist, daß da
ein String mit einer Dateireferenz=Name drinsteht.
Ist also keine Raute drin, dann kommen die beiden klassischen Befehle
für das Vorladen von Bildern, also erstmal einen neuen Eintrag definieren
und dann die Zuweisung der Quelle.
Um ehrlich zu sein, durch diese Funktion bin ich nun einmal durch und
weiß eigentlich nicht mehr als daß sie im Prinzip unter irgendwelchen
Umständen das klassische Bildervorladen macht. Da hab ich wohl noch
einiges zum Grübeln.
Da Dich dieses Thema ja nun schon seit Monaten umtreibt und Du anscheinend
nicht weiterkommst sollst Du das Posting auch erhalten, aber eigentlich ist
es eher was für die Rundablage.
Vielleicht hat ja sonst jemand bessere analytische Fähigkeiten.
Klaus
Hallo Klaus,
vielen Dank für deine ausführliche (und sehr amüsante) Analyse. Ich werde das ganze anonymisiert mal an Macromedia weiterleiten<g>.
Da mich deine Analyse trotzdem nicht weiterbringt, werde ich mal den Hinweis von Claudia probieren:
http://www.teamone.de/selfhtml/tedg.htm
Trotzdem vielen Dank und (an alle) MACHT WEITER SO!!! Das Forum hier ist echt der absolute HIT!!!
Flo
Hallo Flo,
vermutlich bist Du hier nicht mehr bei, vielleicht sogar besser.
Beim Schmökern bin ich eben noch über eine Sache gestolpert:
Unten in der Tabelle steht bei den IMGs zB ein usemap="#aboutMap">
drin.
Ich finde aber nirgends so eine MAP und auch nichts wo sie gemacht
werden könnte. Hast Du alles geposted oder stehen die noch irgendwo?
Mit dem was so an Parametern übergeben wird können die MAP-Namen
auch nicht gebaut werden.
Es hätte ja sein können, daß 'MM_preloadImages('....gif','#929359797630');'
aus dieser sonderbaren Zahl irgendwie was baut. Ist aber wohl nicht.
Diese Zahlenkolonnen wiederholen sich ja in 'onMouseOver="MM_swapImage(...)'
auch entsprechend.
Interessant wäre es zu wissen ob die irgendeinen besonderen 'um-die-Ecke-
Trick' für MAPs haben.
Die Schreibweise legt ja nahe, daß die MAPs in der aktuellen Seite sein
müssten.
Dein nach wie vor ratloser
Klaus