Zufallsbild ohne "Zurücklegen" und mit Beschreibung

[razz]

Hi,

bin momentan bischen mit html am arbeiten und benötige an dieser stelle jedoch auch java, wovon ich eigentlich keine ahnung habe.

1. Und zwar soll folgendes per KLICK ein zufälliges Bild aus dem ordner "fotos" erscheinen lassen. Dies funktioniert auch, jedoch möchte ich das so haben, dass die fotos, die schon erschienen sind, nicht mehr per zufall kommmen, sondern nur die fotos, die noch nicht dran waren.

Mit dem Code im quote kommen die fotos die schon dran waren wieder in die auswahl für das nächste zufällige foto. Also stochastisch gesagt möchte ich eine kugel ziehen ohne sie zurückzulegen

darüberhinaus kommt das bei diesem code ab und zu vor, dass ein bestimmtes foto im ordner nie angezeigt wird. könntet ihr mir vllt mal rüberschauen?

2. Möchte ich, dass zu jedem Foto ein text darunter erscheint, der aus einer .txt datei geladen wird, was bei mir nicht klappt. Dies hab ich im quote versucht (rote makierungen). Wieso klappt das nicht? was muss ich daran ändern?

und 3. gibt es eine Möglichkeit diesen Zufallsbefehl ohne die ganze Seite aktualisieren zu müssen zu starten?

Würde mich über eure Hilfe freuen :)

MfG

<script>

function random_img() {
 images = new Array(
  new Array("fotos/hf.jpg",350,"hjhjhj",[COLOR=Red]"text/dawf.txt"[/COLOR]),
  new Array("fotos/kp.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hesfj.txt"[/COLOR]),
  new Array("fotos/lol.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hgaaahj.txt"[/COLOR]),
  new Array("fotos/rofl.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hjhj.txt"[/COLOR]),
  new Array("fotos/pff.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hrthjhj.txt"[/COLOR])
 );
for (i=0;i<images.length+i;i++) {
 a = Math.round(Math.random()*images.length);
 if ((a >= 0) && (a < images.length)) {
  bild = images[a];
  URL = bild[0];
  breite = bild[1];
  bildname = bild[2];
  [COLOR=Red]textt = bild[3][/COLOR]
   if (navigator.appName.indexOf('Netscape') != -1) { FensterBreite = self.innerWidth }
   else if (navigator.appName.indexOf('Microsoft') != -1) { FensterBreite = document.body.clientWidth };
   var bildweite;
   bildweite = ( FensterBreite >= breite ) ? breite : ( ( FensterBreite < 350 ) ? 350 : "100%" )
   document.write("<img src=\""+URL+"\" border=\"5\" alt=\""+bildname+"\" [COLOR=Red]script src=\""+textt+"\"[/COLOR] width=\""+bildweite+"\" align=\"center\" \/>");
    
  break;
  }
 }
}

</script>

<script type="text/javascript">

random_img();

</script>

 

[mermshaus]

Willkommen im Forum.

Java ... ist nicht Javascript. Ist es nicht! - php.de

Zu 1:

a = Math.floor(Math.random() * n);
    // Liefert eine Zufallszahl zwischen 0 und n - 1

Dein Code liefert eine Zahl zwischen 0 und n, wobei n die Anzahl der Elemente des Arrays ist. Der höchste Index deines Arrays ist aber n - 1.

Zu 2: Wieso sollte das denn klappen? Du kannst dir nicht einfach Syntax ausdenken und dann erwarten, dass das funktioniert. JavaScript kann nur auf Umwegen den Inhalt von Dateien auslesen. Es wäre sinnvoller, die Inhalte bereits serverseitig beim Generieren der Seite an die entsprechende Stelle des Codes zu schreiben. Eine Alternative wäre Ajax.

Zu 3: Na klar. Du machst da clientseitige Programmierung. Du kannst beliebigen JavaScript-Code an Event-Handler binden. So könntest du beispielsweise das aktuell angezeigte Bild dynamisch aus der Liste der noch auswählbaren Bilder entfernen.

 

[razz]

danke schon mal für die ganzen antworten und diee willkommensgrüße! :) kenne nur die absoluten grundlagen in html. von javascript habe ich leider absolut keine ahnung, deswegen hier die ganzen dummen fragen von mir. bloß bin ich in meinem html-code an eine stelle gestoßen, wo javascript nicht vermeidbar ist

zu 1: meinst du ich muss dann einfach

a = Math.round(Math.random()*images.length);

mit

a = Math.floor(Math.random() * images.length);

ersetzen?

weil so klappt das irgendwie nicht:

function random_img() {  images = new Array(   new Array("fotos/hf.jpg",350,"hjhjhj",[COLOR=Red]"text/dawf.txt"[/COLOR]),   new Array("fotos/kp.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hesfj.txt"[/COLOR]),   new Array("fotos/lol.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hgaaahj.txt"[/COLOR]),   new Array("fotos/rofl.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hjhj.txt"[/COLOR]),   new Array("fotos/pff.jpg",350,"individueller Bildtext",[COLOR=Red]"text/hrthjhj.txt"[/COLOR])  ); for (i=0;i<images.length+i;i++) {  a = Math.flor(Math.random()*images.length);  if ((a >= 0) && (a < images.length)) {   bild = images[a];   URL = bild[0];   breite = bild[1];   bildname = bild[2];   [COLOR=Red]textt = bild[3][/COLOR]    if (navigator.appName.indexOf('Netscape') != -1) { FensterBreite = self.innerWidth }    else if (navigator.appName.indexOf('Microsoft') != -1) { FensterBreite = document.body.clientWidth };    var bildweite;    bildweite = ( FensterBreite >= breite ) ? breite : ( ( FensterBreite < 350 ) ? 350 : "100%" )    document.write("<img src=\""+URL+"\" border=\"5\" alt=\""+bildname+"\" [COLOR=Red]script src=\""+textt+"\"[/COLOR] width=\""+bildweite+"\" align=\"center\" \/>");        break;   }  }  }

(häh kp wieso der code auf eine zeile gequetscht ist)


zu 3: wie binde ich sowas denn an einen Event-Handler?

MfG

 

[mermshaus]

Nicht der Weisheit letzter Schluss, aber hier mal eine Demo:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Demo</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script>
            /*<![CDATA[*/

            $(function () {
                var images = [],
                    shuffle = function (array) {
                        var tmp, current, top = array.length;

                        if(top) while(--top) {
                            current = Math.floor(Math.random() * (top + 1));
                            tmp = array[current];
                            array[current] = array[top];
                            array[top] = tmp;
                        }

                        return array;
                    };


                images.push({
                    url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Michael_Zorc20110918.jpg/220px-Michael_Zorc20110918.jpg',
                    description: 'Michael Zorc'
                });
                images.push({
                    url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Michael_Meier.jpg/220px-Michael_Meier.jpg',
                    description: 'Michael Meier'
                });
                images.push({
                    url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Championship_celebration_Borussia_Dortmund_2011.jpg/220px-Championship_celebration_Borussia_Dortmund_2011.jpg',
                    description: 'Meisterfeier 2011'
                });
                images.push({
                    url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/J%C3%BCrgen_Klopp_Saisonstart_01.jpg/220px-J%C3%BCrgen_Klopp_Saisonstart_01.jpg',
                    description: 'Jürgen Klopp'
                });

                images = shuffle(images);



                    $('#next').bind('click', function () {
                        if (images.length === 0) {
                            alert('No more images');
                            return;
                        }

                        var image = images.pop();

                        $('#image').attr('src', image.url);
                        $('#description').html(image.description);
                    });

                $('#next').trigger('click');
            });

            /*]]>*/
        </script>

    </head>

    <body>

        <button id="next">Next</button> Images from Wikipedia

        <hr>

        <p id="description"></p>
        <img id="image" src="" >


    </body>

</html>

 

[razz]

sehr sehr geil! dankeschön! meine 3 fragen haben sich dank deinem code allesamt gelöst. wenn ich mal wieder ne frage habe, nerv ich dich weiter ;)