Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   PHP/javascript-Code Problem bei anzeige versch. Image's (https://www.delphipraxis.net/123217-php-javascript-code-problem-bei-anzeige-versch-images.html)

Mikescher 29. Okt 2008 18:18
PHP/javascript-Code Problem bei anzeige versch. Image's
 
Hallo,

Ich melde mich hier mal wieder mit einem Problem...

Der folgende Code soll eigentlich ein Bild und zwei Pfeile (vor & zurück ) anzeigen auf vor kommt das nächste Bild auf zurück das letzte...

Aber irgendwie funktioniert das alles nicht so wie es soll manchmal zeigt's die Bilder an... manchmal nicht beim ersten Durchlauf mit vor wird z.B. ein Bild nicht angezeigt dann geh ich zurück es wird immer noch nicht angezeigt geh ich dann aber wieder vor zeigt es das Bild dann doch an.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Merlin Quacks-Evita Schwörer</title>
<?

  $Max=93; # Anzahl verwendeter Bilder !!! umbedingt bei Änderungen ändern !!!

  print("<script language=\"JavaScript\">
  <!--
    function OnLoad_Func()
      {
        ImagePreload();
        img_resize();
      }

    function ImagePreload()
      {
        document.Vorladen = new array()

        for(var i = 1; i < 10; i++)
          {
            document.Vorladen[i] = new Image();
            document.Vorladen[i].src = \"0\" + String(i) + \"_M.jpg\";
          }

        for(var i = 10; i < $Max + 1; i++)
          {
            document.Vorladen[i] = new Image();
            document.Vorladen[i].src = String(i) + \"_M.jpg\";
          }

      }

    function img_forward()
      {
        var name = '_M';
        var ActualImage = document.images[\"image\"].src;
        var lastSlash = ActualImage.lastIndexOf('/');
        var Count_String = ActualImage[lastSlash+1]+ActualImage[lastSlash+2];
        var Count = parseInt(Count_String, 10);
        Count = Count + 1;
        if (Count == $Max+1)
          { Count = 1; }
        var NewCount = String(Count)
        while (NewCount.length < String(".$Max.").length )
        {
        NewCount= \"0\"+NewCount;
        }
        var NewImage = NewCount + name + '.jpg';
        document.images[\"image\"].src = NewImage;
        img_resize();
         document.title =String(Count)+\" - \"+NewImage;;
      }

    function img_back()
      {
        var name = '_M';
        var ActualImage = document.images[\"image\"].src;
        var lastSlash = ActualImage.lastIndexOf('/');
        var Count_String = ActualImage[lastSlash+1]+ActualImage[lastSlash+2];
        var Count = parseInt(Count_String, 10);
        Count = Count - 1;
        if (Count == 0)
          { Count = $Max; }


        var NewCount = String(Count)
        while (NewCount.length < String(".$Max.").length )
        {
        NewCount= \"0\"+NewCount;
        }
        var NewImage = String(Count) + name +  '.jpg';
        document.images[\"image\"].src = NewImage;
        img_resize();
         document.title =String(Count)+\" - \"+NewImage;;
      }

    function img_resize()
      {
        var img_img = new Image();
        img_img.src = document.images[\"image\"].src;
        var img_width = img_img.width;
        var img_height = img_img.height;
        var img_width_new = 600;
        var img_height_new = 450;
        if (img_width >= img_height)
          {
            img_height_new = img_height * (600 / img_width);
          }
        else if (img_height > img_width)
          {
            img_width_new = img_width * (480 / img_height);
          }
        document.images[\"image\"].width = img_width_new;
        document.images[\"image\"].height = img_height_new;
      }

    function ImageOver(imagename)
      {
        if (imagename == \"back\")
          {
            document.images[\"back\"].src = \"zuruckover.jpg\";
          }
        else if (imagename == \"forward\")
          {
            document.images[\"forward\"].src = \"vorover.jpg\";
          }
      }

    function ImageOut(imagename)
      {
        if (imagename == \"back\")
          {
            document.images[\"back\"].src = \"zuruck.jpg\";
          }
        else if (imagename == \"forward\")
          {
            document.images[\"forward\"].src = \"vor.jpg\";
          }
      }
    -->
</script>\n");
?>
</head>
<body onLoad="OnLoad_Func()" bgcolor="white" link="white">
 <center>

  <table border="0" width="906">
    <tr>
      <td valign="middle" width="150" height="480"> <a href="javascript:img_back();">
        [img]zuruck.jpg[/img]
        </a> </td>
      <td align="center" valign="middle" width="596">
        <? print("<img src=\"01_"."M".".jpg\" id=\"image\" name=\"image\" alt=\"image\" onClick=\"img_forward();\" />"); ?>
      </td>
      <td valign="middle" width="150"> <a href="javascript:img_forward();"> [img]vor.jpg[/img]
        </a> </td>
    </tr>
    <tr>
      <td colspan="2" height="40" valign="top" align="left"> Bild 001 </td>
      <td valign="top" align="right"> <font>&copy; by Mikescher.de</font> </td>
    </tr>
  </table>
    </center>
</body>
</html>

:arrow: Erklärungen zum Code:

-> In dem Ordner sind 93 Bilder die so angeordnet sind : siehe hier

-> Den Code wollte ich eigentlich dynamisch gestalten so dass ich beliebig viele Bilder hinzufügen kann und nur $Max ändern muss

-> Wer sich das Ergebniss und die Fehler :cry: ansehen möchte (vermutlich weil wohl keiner meine Beschreibung des Fehlers verstanden hat :mrgreen: ) muss nur hier klicken

MfG Mikescher

jfheins 29. Okt 2008 18:26
Re: PHP/javascript-Code Problem bei anzeige versch. Image's
 
Folgendes: Wenn ich den Aufruf zu Img_resize rausnehme (ja, das geht mit Opera im Cache ^^) dann geht es.

Evtl. passiert es, dass du das neue Bild zuweist, er lädt (langsam) du resizest es (er weis noch nicht wie groß es ist und sagt dir "momentan null") auf eine Höhe von null/ einem Pixel.
Wen dus neu lädst, hat er das Bild sofort parat und es funktioniert ;)

Lösung: Erst nach einem Timeout das Bild resizen (wenn überhaupt) z.B. 100 ms ;)

Mikescher 29. Okt 2008 19:00
Re: PHP/javascript-Code Problem bei anzeige versch. Image's
 
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Merlin Quacks-Evita Schwörer</title>
<?

  $Max=93; # Anzahl verwendeter Bilder !!! umbedingt bei Änderungen ändern !!!

  print("<script language=\"JavaScript\">
  <!--
    function OnLoad_Func()
      {
        ImagePreload();
      }

    function ImagePreload()
      {
        document.Vorladen = new array()

        for(var i = 1; i < 10; i++)
          {
            document.Vorladen[i] = new Image();
            document.Vorladen[i].src = \"0\" + String(i) + \"_M.jpg\";
          }

        for(var i = 10; i < $Max + 1; i++)
          {
            document.Vorladen[i] = new Image();
            document.Vorladen[i].src = String(i) + \"_M.jpg\";
          }

      }

    function img_forward()
      {
        var name = '_M';
        var ActualImage = document.images[\"image\"].src;
        var lastSlash = ActualImage.lastIndexOf('/');
        var Count_String = ActualImage[lastSlash+1]+ActualImage[lastSlash+2];
        var Count = parseInt(Count_String, 10);
        Count = Count + 1;
        if (Count == $Max+1)
          { Count = 1; }
        var NewCount = String(Count)
        while (NewCount.length < String(".$Max.").length )
        {
        NewCount= \"0\"+NewCount;
        }
        var NewImage = NewCount + name + '.jpg';
        document.images[\"image\"].src = NewImage;
         document.title =String(Count)+\" - \"+NewImage;;
      }

    function img_back()
      {
        var name = '_M';
        var ActualImage = document.images[\"image\"].src;
        var lastSlash = ActualImage.lastIndexOf('/');
        var Count_String = ActualImage[lastSlash+1]+ActualImage[lastSlash+2];
        var Count = parseInt(Count_String, 10);
        Count = Count - 1;
        if (Count == 0)
          { Count = $Max; }


        var NewCount = String(Count)
        while (NewCount.length < String(".$Max.").length )
        {
        NewCount= \"0\"+NewCount;
        }
        var NewImage = NewCount + name +  '.jpg';
        document.images[\"image\"].src = NewImage;
         document.title =String(Count)+\" - \"+NewImage;;
      }



    function ImageOver(imagename)
      {
        if (imagename == \"back\")
          {
            document.images[\"back\"].src = \"zuruckover.jpg\";
          }
        else if (imagename == \"forward\")
          {
            document.images[\"forward\"].src = \"vorover.jpg\";
          }
      }

    function ImageOut(imagename)
      {
        if (imagename == \"back\")
          {
            document.images[\"back\"].src = \"zuruck.jpg\";
          }
        else if (imagename == \"forward\")
          {
            document.images[\"forward\"].src = \"vor.jpg\";
          }
      }
    -->
</script>\n");
?>
</head>
<body onLoad="OnLoad_Func()" bgcolor="white" link="white">
 <center>

  <table border="0" width="906">
    <tr>
      <td valign="middle" width="150" height="480"> <a href="javascript:img_back();">
        [img]zuruck.jpg[/img]
        </a> </td>
      <td align="center" valign="middle" width="596">
        <? print("<img src=\"01_"."M".".jpg\" id=\"image\" name=\"image\" alt=\"image\" onClick=\"img_forward();\" />"); ?>
      </td>
      <td valign="middle" width="150"> <a href="javascript:img_forward();"> [img]vor.jpg[/img]
        </a> </td>
    </tr>
    <tr>
      <td colspan="2" height="40" valign="top" align="left"> Bild 001 </td>
      <td valign="top" align="right"> <font>&copy; by Mikescher.de</font> </td>
    </tr>
  </table>
    </center>
</body>
</html>
Ok Danke Heins es funktioniert(e) aber ich hab grad gemerkt das alle Bilder eh in den richtigen Größen vorhanden sind, also... raus mit der unnützen Funktion :mrgreen: ..

Ist zwar der seltsame Effekt das es jetzt langsamer geht als vorher... aber damit kann ich leben :mrgreen:

Also DANKE :bouncing4: :bounce1: :bounce2:


Alle Zeitangaben in WEZ +1. Es ist jetzt 04:34 Uhr.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz