Joerg: OnLoad-Handler

Hallo Forum,

ich habe auf meiner Homepage eine kleine Galerie installiert und ein JS-Script aus dem Netz ein wenig abgewandelt.

Leider habe ich das Problem, dass sich die Bilder nicht in der richtigen Größe öffnen. Erst wenn man das Bild einmal geschlossen hat und es erneut öffnen möchte, öffnet es in der richtigen Größe.
Es geht immer erst beim zweiten Aufruf.

Im Einzelnen:
Bildergalerie auf Http-Site mit kleinen jpg. Beim Klick auf das Mini-jpg wird in externer JS ausgelagerte Funktion angesprochen, die ein Fenster mit dem großen JPG öffnet. Die Fenstergörße soll sich nach der Auflösung des Bildes richten, plus ein paar Zentimeter für Über- und Unterschriften.

1. Hier der Aufruf aus dem HTML (verkürzt dargestellt):

<html>
<head>

<script language="JavaScript" src="/js/bilderPopUp.js" type="text/javascript"></script>

</head>
<body>

<a href="javascript: popUpImg('fotos/Ferienwohnung/Essbereich Kueche_1.jpg','Bilder Ferienwohnung', 'Ess- und Küchenbereich', 'Zum Schließen des Fensters bitte auf das Bild klicken')"><img src="fotos/Ferienwohnung/Piktogramme/Essbereich Kueche_1.jpg" alt="Ess- und Küchenbereich ::: Zum Vergrößern bitte klicken" border="0" longdesc="fotos/Ferienwohnung/Essbereich Kueche_1.jpg"></a>

</body>
</html>

2. Hier die JS

function popUpImg(img, Titelschrift, Ueberschrift, Unterschrift) {
   myImg = new Image();
   myImg.src = img;
   var width = myImg.width;
   var height = eval(myImg.height+100);
   var breite = width;
   var hoehe = height;
   var links,oben;

links = eval((screen.width - breite)/2);
   oben  = eval((screen.height - hoehe)/2);

imgWin = window.open('', 'Titelschrift', 'left=' +  links + ', top=' + oben + ', width=' + width + ', height=' + height);

with (imgWin.document) {
      open();
      write('<HTML>');
      write(' <HEAD>');
      write(' <title>' + Titelschrift + ' </title>');
      write(' </HEAD>');
      write(' <BODY style="margin: 0px; font-family: Arial,sans-serif; text-align:center; font-size:12px; line-height:20px;" onLoad="self.focus();">');
      write(' <p> ' + Ueberschrift + ' </p>');
      write(' <a href="" onClick="JavaScript:self.close()">')
      write(' <img src="' + img + '" alt="popUpImage" title="popUpImage" border="0"></a>');
   write(' <p> ' + Unterschrift + ' </p>');
      write(' </BODY>');
      write('</HTML>');
      close();
   }
}

Man hat mir mitgeteilt, was auch logisch und verständlich ist, dass ich erst abwarten müsste, bis das Bild fertig geladen ist, und erst dann auf seine Maße zugreifen könnte.

Das soll gehen, in dem ich den erzeugten Bildobjekten einen onload-Handler dynamisch anhänge.

Ich hab mich jetzt mal schlau gemacht aber als völliger JS - Neuling weiß ich überhaupt nicht, wo und wie ich den onLoad einbauen soll. Im JS oder im HTML? Wie soll das gehen?

Vielleicht kann mir ja einer eine verständliche und kurze Hilfe geben.

Herzlichen Dank

Gruß Joerg

  1. function popUpImg(img, Titelschrift, Ueberschrift, Unterschrift) {
       myImg = new Image();
       myImg.src = img;
       var width = myImg.width;
       var height = eval(myImg.height+100);
       var breite = width;
       var hoehe = height;
       var links,oben;

    links = eval((screen.width - breite)/2);
       oben  = eval((screen.height - hoehe)/2);

    wozu die ganzen eval Aufrufe? Das ist hier völlig überflüssig.

    Das soll gehen, in dem ich den erzeugten Bildobjekten einen onload-Handler dynamisch anhänge.
    Vielleicht kann mir ja einer eine verständliche und kurze Hilfe geben.

    kurz und verständlich:

    var    myImg = new Image();  
    myImg.onload = function() { alert('fertig:' + this) ; };  
    myImg.src = img;
    

    Struppi.

    1. Hi Struppi und Forum,

      wozu die ganzen eval Aufrufe? Das ist hier völlig überflüssig.

      Weil das Bild praktisch in Bildschirmmitte geöffnet werden soll.

      kurz und verständlich:

      var    myImg = new Image();

      myImg.onload = function() { alert('fertig:' + this) ; };
      myImg.src = img;

        
      Danke aber jetzt stehe ich vor dem Problem, dass ich nicht weiß, wo ich diesen Code in die js einbringen soll. Sorry aber ich beginne gerade erst mit JS.  
        
      Unklar ist mir auch, was alert, fertig und this bezwecken soll.  
        
      Wo packe ich denn das in meinem Code hin?  
        
      Danke, Gruß  
        
      Jörg
      
      1. hi,

        wozu die ganzen eval Aufrufe? Das ist hier völlig überflüssig.
        Weil das Bild praktisch in Bildschirmmitte geöffnet werden soll.

        Dabei ist eval aber trotzdem blödsinnig.

        Du hast dort einfache Rechenausdrücke stehen - die kann Javascript, entsprechend notiert, auch vollkommen ohne eval auswerten.

        kurz und verständlich:

        var    myImg = new Image();

        myImg.onload = function() { alert('fertig:' + this) ; };
        myImg.src = img;

        
        >   
        > Danke aber jetzt stehe ich vor dem Problem, dass ich nicht weiß, wo ich diesen Code in die js einbringen soll.  
          
        Dort, wo du das Bild laden willst.  
          
        
        > Unklar ist mir auch, was alert, fertig und this bezwecken soll.  
          
        :rolleyes:  
        Das ist 'ne Kontrollausgabe, um dir erst mal grundsätzlich den Effekt zu zeigen.  
          
        Dass du den alert dann nachher mit der Funktion ersetzt, in der du auf die Bildmaße zugreifen willst - denn erst nachdem dieser Event ausgelöst hat, stehen sie zur Verfügung - sollte doch wohl nicht so schwer zu erraten sein.  
          
        gruß,  
        wahsaga  
          
        
        -- 
        /voodoo.css:  
        #GeorgeWBush { position:absolute; bottom:-6ft; }