Javascript-Variable(n) mit html übergeben

Strauchtomate

Strauchtomate

Grünschnabel
Ich bastle grad an einer Gallerie für meine Homepage und bin da auf ein Problem gestossen.

Also ich zeige zuerst alle Bilder in Miniaturansicht an (einfach mit width & height verkleinert), und wenn der User auf ein Bild klickt, soll ein Popup (neues Fenster) "erscheinen" in dem das Bild in Originalgröße angezeigt wird.

Das ist bis jetzt mal der Code der Gallerie selbst (vereinfacht):
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
  function NeuesFenster(nr)
  {
    MeinFenster = window.open("test2.html", "Detailansicht", "width=800,height=600");
    MeinFenster.focus();
  }
</script>
</head>

<body>
<a href="javascript:NeuesFenster('1')"><img src="LG-step1.jpg" width="200" height="150" alt="Schritt1" /></a>
<a href="javascript:NeuesFenster('2')"><img src="LG-step2.jpg" width="200" height="150" alt="Schritt2" /></a>
<a href="javascript:NeuesFenster('3')"><img src="LG-step3.jpg" width="200" height="150" alt="Schritt3" /></a>
<a href="javascript:NeuesFenster('4')"><img src="LG-step4.jpg" width="200" height="150" alt="Schritt4" /></a>
<a href="javascript:NeuesFenster('5')"><img src="LG-vgl.jpg" width="200" height="150" alt="Groessenvergleich" /></a>
</body>
</html>

das Popup, in meinem Fall die Datei "test2.html" hat folgenden Code:
Code: 
<html>
<head>
<title>Detailansicht</title>
</head>

<body>

<img src="#" width="100%" height="100%" alt="Detailansicht" />

<script type="text/javascript">
var b = new Array();

b[0] = new Image();
b[0].src = "LG-step1.jpg";

b[1] = new Image();
b[1].src = "LG-step2.jpg";

b[2] = new Image();
b[2].src = "LG-step3.jpg";

b[3] = new Image();
b[3].src = "LG-step4.jpg";

b[4] = new Image();
b[4].src = "LG-vgl.jpg";

document.images[0].src = b[0].src;

</script>
</body>
</html>

Es öffnet sich zwar ein Popup und zeigt das Bild in Originalgröße an aber angezeigte Bild ist noch nicht dynamisch.
document.images[0].src = b[0].src;
Statt der statischen 0 sollte eigentlich die Variable "nr" stehen.

D.h. ich müsste die Javascript-Variable "nr" an das neue html-Dokument (test2.html) übergeben uch hab allerdings keine Ahnung wie... :confused:

Ist mir zu helfen?

MfG, Strauchtomate
 
Wenn das Vorschaubild identisch ist mit dem, was da gross gezeigt werden soll, brauchst du diese Klimmzüge garnicht machen.

Rufe die Funktion direkt im Bild auf... dann kannst du ihr selbiges als Objekt übergeben.
dann brauchst du nur noch das Popup öffnen, schreibst den nötigen HTML-Code hinein, fertig:)

Code: 
<script type="text/javascript">
<!--
function NeuesFenster(objImg)
  {
    MeinFenster = window.open("", "Detailansicht", "width=800,height=600");
    with(MeinFenster)
        {
            document.open();
            document.write('\<html\>\<head\>\<title\>Detailansicht\<\/title\>\<\/head\>\<body style="margin:0"\>\<img src="'+objImg.src+'" \/\>\<\/body\>\<\/html\>');
            document.close();
            focus();
        }
    
  }
//-->
</script>

<img style="cursor:pointer"onclick="NeuesFenster(this)" src="LG-step1.jpg"width="200" height="150" alt="Schritt1" />
 
Zuallererst einmal danke für die Hilfe, ich habe deinen Code jetzt noch "optimiert"... :-)
d.h. ich habe versucht es valid zu machen.

Nur irgenwie jetzt das Popup nimma richtig, es geht zwar auf, aber das Bild wird ned angezeigt. :(

Meine Theorie; das Object bzw. die Adresse des Bildes wird nicht richtig übergeben, aber ehrlichgesagt hab ich keine Ahnung.

Hier der Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Gallerie</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<script type="text/javascript">
<!--
function NeuesFenster(objImg)
  {
    MeinFenster = window.open("", "Detailansicht", "width=800,height=600");
    with(MeinFenster)
        {
            document.open();
            document.write('\<html\>\<head\>\<title\>Detailansicht\<\/title\>\<\/head\>\<body style="margin:0"\>\<img src="'+objImg.src+'" width="100%" height="100%" alt="Detailansicht"\/\>\<\/body\>\<\/html\>');
            document.close();
            focus();
        }
    
  }
//-->
</script>

<p>
<a href="javascript:NeuesFenster(this)"><img src="LG-step1.gif" width="200" height="150" alt="Schritt1" /></a>
<a href="javascript:NeuesFenster(this)"><img src="LG-step2.gif" width="200" height="150" alt="Schritt2" /></a>
<a href="javascript:NeuesFenster(this)"><img src="LG-step3.gif" width="200" height="150" alt="Schritt3" /></a>
<a href="javascript:NeuesFenster(this)"><img src="LG-step4.gif" width="200" height="150" alt="Schritt4" /></a>
<a href="javascript:NeuesFenster(this)"><img src="LG-vgl.gif" width="200" height="150" alt="Groessenvergleich" /></a>
</p>

</body>
</html>
 
Hi,

das Problem tritt auf, weil du die Funktion NeuesFenster mit dem Parameter this aufrufst.
Dieser stellt das Objekt dar, aus dem heraus er aufgerufen wird. In deinem Fall also das Linkobjekt.
In Svens Beitrag stand der Aufruf noch im IMG-Tag und somit wurde das richtige Bildobjekt übergeben.

Als Lösung könntest du den ersten Kindknoten vom Link aus übergeben - das ist ja das Bild.
Aber Vorsicht: Zwischen A-Tag und IMG darf nichts stehen, auch kein Leerzeichen.
HTML: 
<p>
<a href="javascript:void(0);" onclick="NeuesFenster(this.firstChild)"><img src="LG-step1.gif" width="200" height="150" alt="Schritt1" /></a>
<a href="javascript:void(0);" onclick="NeuesFenster(this.firstChild)"><img src="LG-step2.gif" width="200" height="150" alt="Schritt2" /></a>
<a href="javascript:void(0);" onclick="NeuesFenster(this.firstChild)"><img src="LG-step3.gif" width="200" height="150" alt="Schritt3" /></a>
<a href="javascript:void(0);" onclick="NeuesFenster(this.firstChild)"><img src="LG-step4.gif" width="200" height="150" alt="Schritt4" /></a>
<a href="javascript:void(0);" onclick="NeuesFenster(this.firstChild)"><img src="LG-step5.gif" width="200" height="150" alt="Groessenvergleich" /></a>
</p>
Ciao
Quaese
 
In welcher Sprache soll das dort nicht zulässig sein?

http://www.w3.org/TR/html4/index/attributes.html hat gesagt.:
onclick
related Elements:All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE
Zum Vergrößern anklicken....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück