HTML-Link mit Zufallsbild zum anklicken

[Lotti]

Hallo,
kann man in einen HTML-Script (mit Javascript-Anteilen) einen Link realisieren, in dem ein Zufallsbild zum Anklicken angezeigt wird?
<a href= ...> <img src="Zufallsbild"> </a>
Der Name des Zufallsbildes wird aus einer Liste vorhandener Bilder festgelegt.

Mit PHP kein Problem: <a href= ...> <img src=" <?php echo $Zufallsbild; ?>"> </a>

 

[mikdoe]

ja ist möglich
geht wie in php auch nur mit anderer syntax und du musst dem browser die auswahl schicken
warum willst du das in js machen?

 

[Lotti]

Ok, der Punkt geht an Dich!
War ja auch blöd gefagt
Ich hab mir vorgenommen, mein eigenes Mahjong-Connect zu basteln, und dabei PHP (erstmal) wegzulassen (ist meine persönliche Challenge). Via CSS, IDs, DIVs und Javascript bekomme ich das Set hin und kann die einzelnen Steine auch anklicken, damit sie verschwinden, aber nur, wenn ich bei jedem Link ein konkretes Bild (z.B. "03.png") hinterlege. Das ist aber nicht Sinn der Sache. Da das Layout zufällig generiert wird, liegt an jeder Position (Link) aber ein anderes (zufälliges) Bild.
Muss nicht zwingend JS sein. Im Canvas stoße ich auf Pobleme, und in HTLM5 auf andere. Bin noch nicht schlüssig, was ich am Ende nehme.
Im Grunde habe ich bis zu 160 Positionen (Links), an denen zufällige Bilder gezeigt werden, die anklickbar sein sollen

 

[mikdoe]

geht schon mit js. ich würde die bildauswahl als json string an den browser geben und dort nimmt sich der browser per js eines zufällig heraus
Generating random whole numbers in JavaScript in a specific range? - Stack Overflow

 

[kkapsner]

Du hast bei Mahjong doch einen festen Satz an Steinen. Somit ist nicht jedes Bild komplett zufällig, sondern davon abhängig, welche Bilder schon ausgewählt wurden. Du brauchst also eigentlich eher ein Array mit allen Steinen und dann mischst du das Array durch. Das geht etwas anders als zufälliges Ziehen mit zurücklegen:

function shuffleArray(arr){
	for (var i = arr.length; i--;){
		var sIndex = Math.floor(Math.random() * (i + 1));
		var h = arr[i];
		arr[i] = arr[sIndex];
		arr[sIndex] = h;
	}
	return arr;
}

 

[Lotti]

Das Layout ist nicht das Problem. Die Teile werden zufällig sogar paarweise erzeugt und ein Array mit allen Zufallsbildern (aus dem Satz der 42 möglichen Bilder) liegt vor. Ebenso die Positionen, an denen die Bilder angezeigt werden sollen.
Nun habe ich zwei Optionen, die ich verbinden muss:
Hinterlege ich in allen Links den konkreten Bildanamen <a ...>"Bild03.png"</a>, habe ich nur bestimmte Bilder und alle sind anklickbar.
In der Version der Anzeige der Zufallsbilder bekomme ich die Links nicht hin und suche nach der Syntax, wie ich die anklickbar mache.

Vielleicht wird es deutlicher, wenn wir ein Schachbrett nehmen. Auf jedem der 64 Felder kann eine andere (oder keine) Figur stehen und es gibt 64 Links (über den Feldern). Mir gelingt es, die funktionierenden Links zu basteln, wenn ich hinter jedem Link konkret festlege, welche "bestimmte" Figur (als Bild) da steht.
Für das 1. Feld (links oben) z.B.
<a href="#" onclick="ausblenden(1);"> <div id="pos1"><img src="Bauer.jpg"></div></a>
...
und das letzte Feld (rechts unten)
<a href="#" onclick="ausblenden(64);"> <div id="pos64"><img src="Turm.jpg"></div></a>

Das klappt aber nicht, wenn ich den Bildnamen "Bauer.jpg" ersetzen muss durch einen variablen Wert, z.B.
Bild34 = Data[34];
In Data[34] steht z.B. "Dame.jpg"
<a href="#" onclick="ausblenden(34);"> <div id="pos34"><img src=Bild34></div></a>

Ich suche also nach der Lösung für <img src=Bild34>

Ich glaube, hier war ein ähnliches Problem, aber leider keine Lösung:
http://forum.jswelt.de/javascript/6834-bilderwechsel-gewechselte-bild-link-anklicken.html

 

[kkapsner]

Bild34 = Data[34];
In Data[34] steht z.B. "Dame.jpg"
<a href="#" onclick="ausblenden(34);"> <div id="pos34"><img src=Bild34></div></a>

So funktioniert HTML einfach nicht. Du musst die src-Eigenschaft im JS setzen und nicht im HTML.

PS: für was sind das <a> und das <div> überhaupt da? Warum gibst du dem <img> nicht das onclick und die ID? Und href="#" ist komplett sinnfrei und verursacht nur Probleme - Layout macht man mit CSS.

 

[Lotti]

Du hast ja Recht, ich habe das aber nur als Beispiel gebracht, um zu verdeutlichen, was ich suche, weil du mir z.B. ja einen "Shuffler" angeboten hast.

OB es geht (meine Eingangsfrage), hast du spontan mit JA beantwortet. Nun ergänze ich: WIE geht das?

Ich habe bereits mehrere "Techniken" versucht und bin auch flexibel, was die Realisierung angeht. Probleme habe ich nicht mit der Programmlogik oder Mathematik, sondern mit der Syntax bestimmter Ausdrücke oder Konstrukte (CSS, JS). In PHP bekomme ich das locker hin, aber ich möchte mich auch tiefer in JS einarbeiten.

Derzeit versuche ich es wie folgt:

Über ein Array definiere ich, an welchen Positionen in jedem Level ein Stein erscheinen soll (1), oder auch nicht (0):
Data = [ [1,1,1,1,1,1,1,1,1, ...], [1,0,1,0,1,0,1,0,1, ...], [1,1,0,1,1,1,0,1,1, ...], ... ] (Real sind es je Level 200 Einträge)

Die 200 möglichen Bildschirmkoordinaten sind "statisch":
xPos = [40,80,120,160,200, ...] (Real sind es 20 "Spalten")
yPos = [40,100,160,220,280, ...] (Real sind es 10 "Zeilen")

Die Namen der verfügbaren Bilder stehen auch fest. Ihre Größe ist einheitlch 38x58px.
Bild = ["1.png","2.png","3.png", ... "40.png"]

Wenn nun im Level 1 insgesamt 120 Steine erscheinen sollen (= Summe der 200 Einträge in Data[0]), erzeuge ich eine Reihe von 60 Zufallszahlen (zwischen 1 und 40) und übergebe die alle 2x an ein Array. So erzeuge ich 60 Paare (= 120 Werte). Dann mische ich sie ordentlich durch und ersetze die 120 "1" in Data[0] durch die 120 Zufallswerte.

Über ein Schleifenkonstrukt (200 Durchläufe) werden dann die 120 Steine (Data > 0) an den entsprechenden Positionen (xPos[x],yPos[y]) dargestellt. Wo ein Bild erscheinen soll, ergibt sich aus xPos[x] und yPos[y]. Welches Bild angezeigt wird, ergibt sich aus dem Eintrag in Data. Steht in Data[158] eine 15, erscheint an xPos[8],yPos[15] das Bild "15.png". Die Darstellung funktioniert Bestens.

Jedes der 120 angezeigten Bilder muss aber nun anklickbar sein und bei Klick soll eine Prüfroutine aufgerufen werden.
Wie gesagt, mit PHP ist das für mich kein Problem, aber mit HTML/CSS/JS bekomme ich das nicht hin.

 

[kkapsner]

Wenn nun im Level 1 insgesamt 120 Steine erscheinen sollen (= Summe der 200 Einträge in Data[0]), erzeuge ich eine Reihe von 60 Zufallszahlen (zwischen 1 und 40) und übergebe die alle 2x an ein Array. So erzeuge ich 60 Paare (= 120 Werte).

Das ergibt irgendwie für mich keinen Sinn. Wie soll denn der Benutzer 60 Paare unterscheiden können, wenn es nur 40 verschiedenen Bilder gibt? Und dann stellst du noch nicht einmal sicher, dass auch wirklich alle 40 verwendet werden...

Jedes der 120 angezeigten Bilder muss aber nun anklickbar sein

Ja - was ist jetzt genau das Problem? Wenn du die Darstellung erstellst, kannst du doch auf dem <img>s auch gleich die entsprechenden EventListener registieren. Mir ist nicht ganz klar, woran du genau hängst.

 

[Lotti]

Kennst Du Mahjong?
Die Paare kommen immer mehrfach vor. Welche Bilder wieoft vorkommen, ist vollkommen egal. Wichtig ist nur, dass sie alle immer paarweise existieren, weil man immer 2 passende anlicken muss, und am Ende darf nicht ein einzelner Stein übrig bleiben.

Mein Problem ist, dass ich die Links für die einzelnen Bilder nicht hinbekomme. Eingangs hatte ich das Beispiel mit einer PHP-Variablen genannt: <a href= ...> <img src=" <?php echo $Zufallsbild; ?>"> </a>
Der Variablen $Zufallsbild kann ich in PHP vorher jedes mögliche Bild zuweisen ( $Zufallsbild = Bild; ) und dieses dann im Link anzeigen lassen: <a href="machwas.php"> <img src=" <?php echo $Zufallsbild; ?>"> </a>
Mit PHP kann ich auch alle 120 Links (um bei meinem Beispiel aus meinem Vorpost zu bleiben) durch eine Schleife erzeugen. Da reicht also ein Dreizeiler, um 120 Links an 120 verschiedenen Positionen zu erzeugen, bei denen jeder Link ein Bild anzeigt, das als Variable deklariert ist.

WIE bekomme ich das mit JS hin? Du sagtest ja, dass es gehen würde.

WAS muss ich also genau anstelle von "Hier Klicken" schreiben (<a href ...>Hier Klicken</a>), damit da nicht der Text "Hier Klicken" steht, sondern ein Bild angezeigt wird, dessen Name aber in einer Variablen (Data) steht? Dass das kein Dreizeiler wird, ist mir klar.

<a href ...> <script ...> ??? </script> </a> analog zu PHP habe ich nur hinbekommen, wenn ich einen konstanten Bildnamen z.B. "34.png" übergebe. Ersetze ich den Bildnamen aber durch eine Variable, die den Wert "34.png" enthält, kann ich nicht mehr klicken.

Wie lautet genau der Ausdruck anstelle der 3 Fragezeichen, damit dort z.B. das Bild Data[158] angezeigt wird und angeklickt werden kann?

Glaube mir, ich habe schon tagelang Zig Seiten studiert, aber in Verbindung mit JS habe ich keine einzige Seite gefunden, wo eine Variable zwischen <a ...> und </a> steht.

Es muss ja auch kein <a href ...> sein, jede alternative Lösung (außer PHP) wäre mir Recht.

 

[kkapsner]

Zeig' doch mal einen Code, mit dem du bis jetzt die Anzeige zusammenbaust... irgendwie habe ich den Verdacht, dass du viel zu kompliziert denkst.

Ich würde auf jeden Fall auch das DOM per JS aufbauen:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
var out = document.getElementById("output");
for (var i = 0; i < 10; i += 1){
	var row = document.createElement("div");
	for (var j = 0; j < 10; j += 1){
		var img = document.createElement("img");
		img.alt = img.src = i + "-" + j + ".png";
		img.addEventListener("click", function(i, j){
			return function(){
				alert("clicked " + i + ", " + j);
			};
		}(i, j), false);
		row.appendChild(img);
	}
	out.appendChild(row);
}
</script>
</body>
</html>

 

[Lotti]

Na also, geht doch!
Das Script funzt nach Entfernen von i + "-" perfekt und ist in der Tat viiiieeeel einfacher, als ich gedacht habe.
Mein Problem ist wohl, dass ich (noch) nicht weiß, was eine kleine Änderung irgendwo dann an ganz anderer Stelle so alles bewirken kann - oder eben auch nicht.
Ganz lieben Dank.
Ich bastele jetzt erstmal damit rum und dann kann ich ja mal ein Zwischenergebnis feedbacken.
Schöne Weihnachten erstmal und so'n Kram ...

 

[Lotti]

ich habe Dein Script mal meinen Bedarfen angepasst und funktioniert Bestens. Anhängend eine Kurzfassung mit weniger Daten zur besseren Übersicht. Ganz dicken Dank nochmal.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
    <div id="Container"></div>
    <div id="PosId"></div>

    <script type="text/javascript">

        var Data = [1,3,7,2,4,5,7,1,41,35,12,34];
        // 12 Einträge (für Bildnamen), die in 4 Spalten (xPos) und 3 Zeilen (yPos) dargestellt werden sollen
     
        var xPos = [ 50,100,150,200, 50,100,150,200, 50,100,150,200];	// 4 Bilder nebeneinander (Spalten)
        var yPos = [ 60, 60, 60, 60,120,120,120,120,180,180,180,180]; 	// 3 Bilder untereinander (Zeilen)

        var Stein = document.getElementById("Container");

        function Auswertung (PosNr,BildNr) {
            alert("Pos: " + PosNr + ", Bild: " + BildNr);
        }

        function Ausgabe (n,png) {
            img.style.position = "absolute";
            img.style.left = xPos[n]+"px";
            img.style.top = yPos[n]+"px";
            Stein.appendChild(png);
        }

        for (var i = 0; i < 12; i += 1) {
  	    var img   = document.createElement("img");
            img.setAttribute("src", "../Set_1/" + Data[i] + ".jpg");
            img.setAttribute("width", "40");
            img.setAttribute("height", "50");
            img.setAttribute("alt", Data[i] + ", ");
	    img.addEventListener("click", function(i) {
		return function() {
	            Auswertung (i,Data[i]);
		};
	    } (i), false);
	    Ausgabe (i,img);
        }

    </script>

</body>

</html>

 

[zirzofer]

 img.setAttribute("src", "../Set_1/" + Data[i] + ".jpg");
            img.setAttribute("width", "40");
            img.setAttribute("height", "50");
            img.setAttribute("alt", Data[i] + ", ");

bitte verwende setattribute nur für nicht-standard-attribut. so geht es kürzer, einfacher und besser:

img.src = "../Set_1/" + Data[i] + ".jpg";
img.width = 40;
//usw.

When to use setAttribute vs .attribute= in JavaScript? - Stack Overflow

 

[kkapsner]

Ganz dicken Dank nochmal.

Bitte - gern geschehen.

PS: Ich geben zirzofer ganz recht.

 

[Lotti]

Hallo ...
erstmal wünsche ich Allen ein frohes Neues Jahr.

Beim Ausmisten meiner Daten bin ich auf ein uraltes Script gestoßen, in dem doch tatsächlich eine Lösung meines Anliegens versteckt war. Ich habe das mal angepasst und stelle es hier gern zur Verfügung. Die Umsetzung ist wohl nicht gerade "vom Feinsten", aber sie funktioniert.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style>
        a:hover { -webkit-filter: opacity(0.5); filter: opacity(0.5); }
    </style>
</head>

<body>

    <script type="text/javascript">

        var Data = [1,2,3,4,5,6,7,8,9,10];	// 10 Bilder im Vorrat
        var xPos = [50,100,150,200];		// 4 Bilder nebeneinander (Spalten)
        var yPos = [60,120,180,240]; 		// 4 Bilder untereinander (Zeilen)

        var Zufall;
        var Bildname;

        function Klick (x,y,b) {
            alert("x = " + x + ", y = " + y + " - " + b);
        }

        for (var y = 0; y < 4; y++) {
            for (var x = 0; x < 4; x++) {  
                Zufall = Math.floor(Math.random() * Data.length) + 1;
                Bildname = Zufall+".png";
                document.write("<div id=\"position\" style=position:absolute;left:" + xPos[x] + "px;top:" + yPos[y] + "px;>");
                document.write("<a href=javascript:Klick("+xPos[x]+","+yPos[y]+","+Zufall+")>");
                document.write("<img src=\""+Bildname+"\" alt=\""+Zufall+"\">");
                document.write("</a></div>");
            }
        }

    </script>

</body>

</html>

 

[zirzofer]

dir auch ein frohes neues jahr.
hilfe, document.write!