Nathalie: Anzeigereihenfolge von Bildern

Hallo Community

Bitte um Hilfe bei folgender Zielsetzung:
Eine HTML-Seite beinhaltet ein großes und mehrere kleine Bilder. Die kleinen Bilder sollen erst angezeigt werden wenn das Große geladen ist und angezeigt wird.

Soweit bin ich schon (auszugsweise):

<script type="text/javascript">
<!--
document.getElementById('kleinebilder').style.visibility="hidden";
function anzeigen() {
  document.getElementById('kleinebilder').style.visibility ="visible";
}
//-->
</script>

<body onload="anzeigen();">

<img src="grossesbild.jpg" width="874" height="670" alt="" />

<div id="kleinebilder">
<img src="kleinsbild1.jpg" width="50" height="50" alt="" />
<img src="kleinsbild2.jpg" width="50" height="50" alt="" />
</div>

Irgendwie funktioniert dies noch nicht so wie oben beschrieben, die kleinen Bilder werden sofort angezeigt und danach erst das Große.

Was mache ich da falsch?
Bitte um Hilfe in leicht verständlichen Worten, meine Javascript-Kenntnisse sind eher gering...

Danke, Nathalie

  1. hi,

    Eine HTML-Seite beinhaltet ein großes und mehrere kleine Bilder. Die kleinen Bilder sollen erst angezeigt werden wenn das Große geladen ist und angezeigt wird.
    [...]
    <body onload="anzeigen();">
    [...]
    Irgendwie funktioniert dies noch nicht so wie oben beschrieben, die kleinen Bilder werden sofort angezeigt und danach erst das Große.

    onload feuert erst dann, wenn das Laden _aller_ externen Ressourcen beendet wurde. Es ist also für dein Vorhaben untauglich.

    Das, was ich gerade eben schon in einem anderen Thread empfohlen habe, könnte da zielführender sein.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. onload feuert erst dann, wenn das Laden _aller_ externen Ressourcen beendet wurde. Es ist also für dein Vorhaben untauglich.

      Wenn "das Laden _aller_ externen Ressourcen" bedeutet das onload erst feuert wenn alle Bilder geladen sind - also die kleinen Bilder UND das Große - wäre es für mein Vorhaben ja das Richtige.
      Oder übersehe ich da was?

      Nathalie

  2. Hi,

    <script type="text/javascript">
    <!--
    document.getElementById('kleinebilder').style.visibility="hidden";
    function anzeigen() {
      document.getElementById('kleinebilder').style.visibility ="visible";
    }
    //-->

    Was mache ich da falsch?

    Beim Verstecken ist das Element doch noch gar nicht vorhanden! (Das sollte dir auch die Fehlerkonsole melden!)

    Entweder Du erzeugst mit JS *CSS*-Code, der dafür sorgt, daß das Element mit der ID versteckt wird, oder Du setzt das Versteckscript hinter oder in das DIV-Element selbst:

    <div id="kleinebilder"><script type="text/javascript"><!--
     if(document.getElementById && document.getElementById('kleinebilder')) { document.getElementById('kleinebilder').style.visibility="hidden"; }
    //--></script>
    <img src="kleinsbild1.jpg" width="50" height="50" alt="" />
    <img src="kleinsbild2.jpg" width="50" height="50" alt="" />
    </div>

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
    1. Super, Danke - genau das was ich suchte!!!!!

      Und mit etwas experiementieren hab ich auch den Rest gefunden...