✔ Banner Rotator Script funktioniert nur im IE!!

B

Basu

Grünschnabel
Hallo,

Ich hoffe das mir jemand von euch helfen kann. Ich habe ein Script für einen Banner Rotator geschrieben. Dummerweise funktioniert das ganze jetzt nur im IE, und ich weiß absolut nicht warum.. Ich habe auch schon mehrmals das Forum durchgegraben aber auch nichts gefunden was mir helfen könnte (glaube ich). Naja vielleicht seht ihr ja den Fehler..

Hier erstmal der Code meines Scriptes

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/jscript"> 
var bilder = new Array(3);
bilder[0]=new Image();
bilder[0].src="banner1.gif";
bilder[1]=new Image();
bilder[1].src="banner2.gif";
bilder[2]=new Image();
bilder[2].src="banner3.gif";
</script>

<script> 
var i=0
function change () {
document.banner.src=bilder[i%3].src;
i++;
window.setTimeout("change();",4000);
return;
}
</script> 
</head>

<body onLoad="change();">

<img name="banner" src="banner1.gif">

 </body>
</html>

Im Internet läuft der Rotator durch wie er soll, alle 4sec einen Bannerwechsel.
Im FF und im Netscape, zeigt mir der Browser nur das erste BIld an und dann is schluss..

Ich hätte aber gerne ein Script das ebenfalls im Netscape und Firefox funktioniert.

Danke schonmal im vorraus :)

MfG Basu
 
Hi,

zunächst solltest du im SCRIPT-Tag im Type-Attribut text/javascript notieren. jscript interpretiert
nur der IE.
Als nächstes solltest du über eine ID auf das IMG-Element zugreifen. Das sollte alle aktuellen
Browser unterstützen.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
  <!--
var bilder = new Array(3);
bilder[0]=new Image();
bilder[0].src="banner1.gif";
bilder[1]=new Image();
bilder[1].src="banner2.gif";
bilder[2]=new Image();
bilder[2].src="banner3.gif";

var i=0
function change() {
  document.getElementById("banner").src=bilder[i%3].src;
  i++;
  window.setTimeout("change();",4000);
}
 //-->
</script>
</head>

<body onload="change();">
  <img name="banner" id="banner" src="banner1.gif">
</body>
</html>
Ciao
Quaese
 
Klasse es funktioniert! ^^ Danke für die schnelle Hilfe Quaese :-)

Jetzt hab ich aber nochmal ne Frage, kann ich einen Banner Rotator als Background Image für einen Layer benutzen? Wenn ja wie lade ich diesen dann in den Layer :)

Normalerweise wäre der Code für ein normales BG Image ja so:
HTML: 
<div id="Layer1" style="position:absolute; width:640px; height:465px; z-index:1; left: 314px; top: 88px; background-color: #FFFFFF; layer-background-color: #FFFFFF;  background-image: url(layerback.gif); layer-background-image: url(layerback.gif);">

So wie füge ich nun den Rotator ein, bzw geht es überhaupt :confused:

MfG
 
Auf css-Eigenschaften kannst du ganz einfach mit
HTML: 
document.getElementById('Layer1').style.backgroundImage = 'url('+ url +')';
zugreifen. Dann braucht es allerdings die ganzen "new Image()"-Sachen nicht und du kannst die URLs zu den Bildern direkt in einem Array speichern.

Aber mal ne Frage: Gibt es überhaupt die css-Eigenschaft "layer-background-image"? Das normale backgound-image kenn ich ja, aber...
 
Hi con-f-use,

ich habe mich auch gewundert als der Dreamweaver es ausgespuckt hat :suspekt: , deshalb habe ich es entfernt und dann ging nichts mehr...
Nach langem hin und her hab ichs wieder eingefügt und es funktioniert und solange es das tut bleibts schön dort wo es ist :-) .

Deinen Tip werde ich mal ausprobieren (wenn ich heute noch dazu komme) :).
Aber ich versteh nicht ganz wie ich mit deinem Code meinen Bannerrotator als festes BG Image für einen Layer benutzen kann ich möchte ja das die Bilder in einer Ecke meines Layers auf dem ich meinen Text ausgebe im Hintergrund stehen, sprich sie können nicht verschoben werden sondern haben einen festen Platz bzw wiederholen sich wenn der Layer zu groß wird.
HTML: 
document.getElementById('Layer1').style.backgroundImage = 'url('+ url +')';

und des ganze soll ich dann einfach mit dem Code machen? Is ja schon fast zu einfach *nerv* :p Kannst du mir bitte dann mal den Ablauf erklären? *liebschau*

Oder gibt es eine möglichkeit des Script von Quaese beizubehalten und geringfügig zu ergänzen

Danke :)
 
Zuletzt bearbeitet:
Klar, wenn du so lieb fragst.

Diese Anweisung, die ich da geopstet habe musst du natürlich in einen Bannerrotation-Code integrieren. Einfach statt
document.banner.src=bilder[i%3].src; schreiben und das veränderte Array für die Url reinhauen, denn diese Anweisung verändert das scr-Attribut des Bildes mit der id="banner", während meine Anweisung die style-Eigenschaft mit namen background-image verändert. Jetzt verstanden?

Das könnte fertig dann so aussehen:
HTML: 
<script type="text/javascript"><!--
     var bilder = [
     	'banner1.gif',
     	'banner2.gif',
     	'banner3.gif'
     ];
     
     var i=0
     function change() {
     	document.getElementById('Layer1').style.backgroundImage = 'url('+ bilder[i%3] +')';
     	i++;
     	window.setTimeout("change();",4000);
     }
     //--></script>
Hab's aber nicht getestet.
 
Zuletzt bearbeitet:
Übrigens:
Code: 
document.banner.src=.....
...so wie es im Eingangspost stand, ist vollkommen korrekt.

Die einzige Wirkung, die das Ansprechen des Bildes per getElementbyId() hat , ist, dass das Ganze dann in NN4 und IE4 nicht mehr funktioniert.
 
^^ ich dank euch beiden *tilt* :suspekt:

So was mach ich jetzt :p

Ich will das der Rotator wie er jetzt ist (bis jetzt) in allen gängigen Browsern funktioniert :-)

also muß ich doch meinen jetztigen Code

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
  <!--
var bilder = new Array(3);
bilder[0]=new Image();
bilder[0].src="banner1.gif";
bilder[1]=new Image();
bilder[1].src="banner2.gif";
bilder[2]=new Image();
bilder[2].src="banner3.gif";

var i=0
function change() {
  document.getElementById("banner").src=bilder[i%3].src;
  i++;
  window.setTimeout("change();",4000);
}
 //-->
</script>
</head>

<body onload="change();">
  <img name="banner" id="banner" src="banner1.gif">
</body>
</html>

soweit ändern das der Rotator im Hintergrund meines Layers steht und weiterhin rotiert :) *wiederhole mich ich weiß*
kann mir jetzt niemand kurz und bündig erklären wie ich es machen kann das das ganze dannnoch in den gängigen Browsern funktioniert :confused:

MfG Basu
 
NN4 und IE4 sind keine gängigen Browser, mach's so wie ich's oben geschrieben habe.

Wenn's dir unbedigt so am Herzen liegt kannst du folgendes statt der bewussten Anweisung benutzen (ansonsten bleibt der Code unverändert):
Code: 
if (document.getElementById) obj = document.getElementById('Layer1'').style;
      else if (document.all) obj = document.all['Layer1'].style;
  obj.backgroundImage = 'url('+ bilder[i%3] +');
So unterstützt es mit etwas glück noch ein paar mehr Browser.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück