Merle: Bilderbuch-Probleme mit IE

SELF-Forum

Bilderbuch-Probleme mit IE

Merle
– Informationen zu den Bewertungsregeln

Hallo!

Ich hab die Bilderbuch-Funktion aus SelfHTML genommen, sie um die Aufblätter-Funktion erleichtert (brauch ich nicht) und lasse mein Bilder aus einem Array auslesen. Das klappt soweit auch alles wunderbar in Safari, Mozilla und Netscape. Nur der Internet Explorer will die Bilder nicht darstellen. Hat jemand ne Idee, warum?

Hier der Code:

<html><head>
<title>Livret</title>
<script type="text/javascript" src="../js/dhtml.js"></script>
<script type="text/javascript">
<!-- Hide from old browsers

var i = 0;
var image;

var images = new Array();
images[0] = new Image();
images[0].src = "../pics/livret/livret_00.jpg";
images[1] = new Image();
images[1].src = "../pics/livret/livret_01.jpg";
images[2] = new Image();
images[2].src = "../pics/livret/livret_02.jpg";

function next() {
if (i != 2) {
i++;
image = getElement("id", "bildbereich");
  if (DOM && bildbereich.firstChild) {
    bildbereich.firstChild.src = images[i].src;
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + images[i].src + '">';
  } else if (NS4) {
    setContent("id", "bildbereich", null,
      '<img src="' + images[i].src + '">');
  }
}
}

function previous() {
if (i != 0) {
i--;
image = getElement("id", "bildbereich");
  if (DOM && bildbereich.firstChild) {
    bildbereich.firstChild.src = images[i].src;
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + images[i].src + '">';
  } else if (NS4) {
    setContent("id", "bildbereich", null,
      '<img src="' + images[i].src + '">');
  }
}
}

function Init () {
  bildbereich = getElement("id", "bildbereich");
  if (DOM && document.createElement && bildbereich.appendChild) {
    var img = document.createElement("img");
    img.setAttribute("src", images[0].src);
    bildbereich.appendChild(img);
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + images[0].src + '">';
  } else if (NS4) {
    setContent("id", "bildbereich", null,'<img src="' + images[0].src + '">');
  }
}

// -- End Hiding Here -->

</script>
<style type="text/css">
body {color:#000; background-color:#fff; margin:0px; padding:0px;}
#korkbereich {position:absolute; left:0px; top:0px; z-index:0;}
#bildbereich {position:absolute; left:5px; top:8px; width:620px; height:207px; z-index: 1;}
#navigation { position:absolute; left:14px; top:220px;
  width:605px;z-index:2;}
</style>

</head>
<body onLoad="Init()">

<div id="korkbereich">
<img src="../pics/livret/background.jpg">
</div>

<div id="bildbereich"></div>

<div id="navigation">
<a href="javascript:previous()"><img src="../pics/livret/cursor_left.jpg" width="115" align="left" border="0"></a>
<a href="javascript:next()"><img src="../pics/livret/cursor_right.jpg" width="115" align="right" border="0"></a>
</div>

</body>
</html>

____________________________________

Über Hilfe wäre ich wirklich dankbar.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilderbuch-Probleme mit IE

    Maxx Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Merle,

    Nur der Internet Explorer will die Bilder nicht darstellen.

    function Init () {
      bildbereich = getElement("id", "bildbereich");

    sowie:

    #bildbereich {position:absolute; ...
    <div id="bildbereich"></div>

    Mit dieser ID bringst du die Funktion Init() durcheinander. Du solltest sie umbenennen. Dann klappt es auch mit dem IE.
    Im Original ist das #Bildbereich. Und natürlich darfst du nicht vergessen es im Init auch zu ändern.
    -> getElement("id", "Bildbereich");

    Grüße,

    Jochen

    --
    Heute schon gescribbelt?
    Scribbleboard
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. mit Kanonen auf Spatzen schießen

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Merle,

    Ich hab die Bilderbuch-Funktion aus SelfHTML genommen, sie um die Aufblätter-Funktion erleichtert (brauch ich nicht) und lasse mein Bilder aus einem Array auslesen. Das klappt soweit auch alles wunderbar in Safari, Mozilla und Netscape. Nur der Internet Explorer will die Bilder nicht darstellen. Hat jemand ne Idee, warum?

    Ich glaube, du schießt mit Kanonen auf Spatzen. Kann es sein, dass du nichts weiter willst, als eine gewöhnliche Endlosdiaschow, nur anders als BastiNRW, noch nicht einmal mit einer TimeOut-Funktion?

    Nun, wenn ihr euch beide so schwer tut, dann will ich mich doch mal erbarmen:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Endlosdiashow</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<link [link:view-source:http://www.sprachlernspiele.de/selftests/dia/style.css@title=href="style.css"] rel="stylesheet" type="text/css">  
<script type="text/javascript">  
[code lang=javascript]  
var idx=0;  
  
var bilder = new Array('abb1.gif', 'abb3.jpg', 'abb10.gif');  
  
function weiter (zahl) {  
  var max = bilder.length;  
  idx = (idx + zahl + max) % max;  
  with (document.images['bild']) {  
    alt = bilder[idx];  
    title = alt;  
    src = alt;  
  }  
  return false;  
}

    </script>
    </head>
    <body>
      <div id="schalt">
        <a title="zurück" href="#" id="bwd" onclick="return weiter(-1)"></a>
        <a title="vorwärts" href="#" id="fwd" onclick="return weiter(1)"></a>
      </div>
      <div id="centr">
        <img name="bild" src="abb1.gif" border="0" alt="abb1.gif" title="abb1.gif">
      </div>
    </body>
    </html>
    [/code]

    Am Anfang wird als Bild das im Array bilder verzeichnete erste Element angezeigt. Das spiegelt sich auch in der global deklarierten Indexvariablen idx wider, die zunächst auf Null gesetzt wird. Der Funktion weiter() wird als Parameter entweder die Zahl +1 oder -1 übergeben. Die Variable max berechnet sich aus der Anzahl der Bilder (bilder.length).

    Über den Divisionsrest- oder Modulo-Operator (%) wird bewirkt, dass wenn das letzte Element des beliebig langen Arrays erreicht wird, als nächstes wieder auf das erste Element des Arrays zurückgesprungen wird.

    Wenn man zurückschaltet, ist das im Prinzip genauso. Damit aber beim Subtrahieren (oder besser gesagt: Addieren der Zahl -1) keine negativen Indexnummern für das Array generiert werden, muss vor der Modulo-Operation die Gesamtanzahl der Bilder im Array noch einmal hinzuaddiert werden. Auf diese Weise springt beim Zurückblättern im Array der Index als nächstes auf das letzte Array-Element zurück, wenn zuvor das erste Element mit dem Index 0 erreicht wurde.

    Wenn die Funktion weiter() ihre Schuldigkeit getan und sie das Bild über das Images-Objekt ausgetauscht hat, reicht sie zum Schluss noch den booleschen Wert false über den Eventhandler onclick zurück, damit der Browser weiß, dass es über diese beiden Schalter-Links sonst nichts zu laden gibt.

    In Aktion ist das zu sehen unter:
    http://www.sprachlernspiele.de/selftests/dia/index.html

    Für die, deren Herz noch so sehr an älteren Browsern wie Netscape4 hängt, dass sie auch nicht davor zurückschrecken, Riesen-DHTML-Bibliotheken einzubinden, habe ich auch mal was gebastelt, zu dem ich mir aber die Erklärungen spare:
    http://www.sprachlernspiele.de/selftests/dia/altbrowser.html

    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln