HTML/CSS onclick mehre Bilder ausgeben

[mydoys.de]

Hey.. Ich habe da so ein Klitze kleines Problem..

Zum Problem:
Ich habe ne Rangliste da werden die User gelistet ich möchte gerne das wenn der User ein Foto hochgeladen hat und man auf den Namen Klickt sein Foto angezeigt wird..

Die Funktionen sind klar:

<div id="infoBox" style="width: 450px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
{GRAFIK}
  <div style="text-align: center; margin-top: 20px"><input type="submit" value="Schließen"  onclick="buttonHide()" class="btn btn-primary" /></div>
</div>

<div onclick=\"buttonShow()\">$row[name]</div>

<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
 info.style.left = "500px";
 info.style.top = "200px";
// Oder ein definiertes Stückchen unter dem Knopf
//info.style.marginTop = "10px";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
//-->
</script>

Zum Problem, wenn ich jetzt den Usernamen anklicke kommt natürlich nur "{GRAFIK}" da soll aber das bild dargestellt werden, gibt es ne möglichkeite das ich diesen mit übertrage so in etwa ?

<div onclick="buttonShow()" name="BILDNAME">USER</div>

Ich würde einen Link Posten damit es sehen kann.. aber das ist ja glaube ich nicht erlaubt ..

 

[Bububoomt]

Also Statt {Grafik} würde ich ein img tag mit einer ID einfügen, am besten src ein transparentes 1*1px als default setzen.

<img src="transp.png" id="userbild">

Dann kannst du folgendes machen:
<div onclick=\"buttonShow('$row[bildurl]')\">$row[name]</div>

so hast direkt die bildurl an buttonShow übergeben und kannst da einfach


function buttonShow(var bildurl) {
// Infobox anzeigen
document.getElementById("userbild").src=bildurl;
info.style.display = "";
}

 

[mydoys.de]

Also Statt {Grafik} würde ich ein img tag mit einer ID einfügen, am besten src ein transparentes 1*1px als default setzen.

Das steht nur drinnen, weil ich erstmal nicht wusste wie ich es anstellen soll.. Aber danke...

Ich habe deinen vorschlag mal versucht umzusetzen, klappt nur irgendwie nicht..
Die Box die erst kommen soll wenn es geklickt ist sieht man nun ständig ..
Und das mit dem Bild klappt leider auch nicht

<div id="infoBox" style="width: 450px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
<img src="transp.png" id="userbild">
  <div style="text-align: center; margin-top: 20px"><input type="submit" value="Schließen"  onclick="buttonHide()" class="btn btn-primary" /></div>
</div>


	
<div onclick="buttonShow('Screenshots/096760bc.png')">name</div> 




<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
 info.style.left = "500px";
 info.style.top = "200px";
// Oder ein definiertes Stückchen unter dem Knopf
//info.style.marginTop = "10px";
 
function buttonShow(var bildurl) {
  // Infobox anzeigen
document.getElementById("userbild").src=bildurl;
  info.style.display = "";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
//-->
</script>

Edit:

Vielleicht hilft das:

Beim Start : SyntaxError: missing formal parameter test...php:31:20
Beim Klick : ReferenceError: buttonShow is not defined test...php:1:1

 

[Bububoomt]

Gib mal die URL, das schon ok, die zu posten.

wenn die schon beim start erscheint musst du die ja erst deaktivieren mit display:none, wenn du da eh schon Style angaben drin hast. Also nicht erst mit JS, wobei besser ist eine class zu verwenden.

 

[tleilax]

Nimm mal das "var" bei der Funktionsdefinition raus.

 

[Paladin]

Mal ne blöde Frage: In deinem ersten Post hast du in der Infobox {GRAFIK} drinstehen.
Warum setzt du da statt {GRAFIK} nicht ein

<img src="/pfad/zum/userbild.jpg" class="userbild" />

rein und dann funktioniert es doch. Oder habe ich was übersehen?
Anschließend noch per css img.userbild mit Eigenschaften ausstatten und gut ist.

 

[Bububoomt]

Weil er mehrere Bilder hat, für jeden user ein anderes was nur gezeigt wqird wenn man auf den Namen klickt.

 

[Paladin]

Weil er mehrere Bilder hat, für jeden user ein anderes was nur gezeigt wqird wenn man auf den Namen klickt.

Ja, aber die Bilder kann man ja dann per ajax nachladen oder das Bild generell per JS eintragen.
Auf dem Link-Button ein data-userid=123, dann beim onclick das Attribut auslesen, dieses per JS als IMG laden und das DIV dann anzeigen.
Alternative: Viele DIV's mit unterschiedlichen ids (id=userid) und dann im onclick das "data-userid=userid" des a-links auslesen, dann nur das DIV anzeigen, dass "div#userid" hat auf visible setzen.

 

[Bububoomt]

@Paladin
du hast die anderen Postings nicht angeguckt?

Die Funktion hat doch nun Parameter der Bild URL die übergeben wird und das Bild tauscht, so das keine AJAX Aufrufe nötig sind und alles nur per JS passiert.

 

[mydoys.de]

Nimm mal das "var" bei der Funktionsdefinition raus.

Damit klappt es Prima!!

Danke an Bububoomt und tleilax !!