Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

Pop-up mit JavaScript

Sigi Saudi / 3 Antworten / Baumansicht Nickles
Hallo Java Script Freaks,
ich brauche jemanden, der mir weiterhilft.

Ich habe eine dia page mit html tables erstellt.
Innerhalb dieser page rufe ich javascript window.open auf, um das dia im format 640 px x 480 px anzuzeigen in einem pop-up window.
Das funktioniert auch, ich erhalte ein pop-up window mit dem bild.

Ich moechte dem pop-up nun aber einen kurzen Text hinzufuegen, der das Bild erlaeutert.
Ich koennte das ganze nun ganz normal ohne javascript erstellen als neue html file, aber ich moechte im gleichen programmablauf bleiben.
Meine Frage:
Wie sage ich javascript, eine box einzufuegen mit text auf der gerade nach dem unten gezeigten Muster geoeffneten bild-seite?
Die uebrigen parameter, die window.open noch zulaesst, helfen auch nicht weiter.

Hier mein programmablauf, bei dem ich die spitzen html klammern durch eckige ersetzte, damit Nickles den html code nicht uebersetzt:


[head]

................
................

[script language="JavaScript" type="text/javascript"]

function insertImg()
{
window2=window.open("","pictwin", 'width=665,height=515,scrollbars=no, resizable=yes');
window2.moveTo(225,150);
window2.focus();
}

[/script]

..............
..............

[/head]

.............
.............

[body]

.............
.............

[td]
[a href="slides2/riverside4.jpg" target="pictwin" onClick="insertImg()"] [!-- Bild im neuen Window --]
[img border="2" src="thumbs2/riverside4.jpg" alt="Bild 1" width="102" height="77"] [!-- Dia --]
[/a]
[/td]

................
................

[/body]

Gruesse aus Riyadh
SigiSaudi
Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
mr.escape Sigi Saudi „Pop-up mit JavaScript“
Optionen
Re: Pop-up mit JavaScript ............................................................
Das neue fenster besteht nur aus dem bild und kann somit keine weiteren inhalte anzeigen. Willst du mehr, dann kommst du um generiertes HTML und/oder DOM+scripting nicht herum.

Z.b. (quick&dirty):
function insertImg(url){
  window2=window.open("","pictwin", 'width=665,height=515,scrollbars=no, resizable=yes');
  window2.document.write("<html><head><title>Hi!</title></head><body></body></html>");
  window2.document.body.innerHTML="<img src='" +url + "'><br />" +url + "<br />";
  window2.moveTo(25,150);
  window2.focus();
}
...
<a href="#" onclick="insertImg('slides2/riverside4.jpg')"><!-- Bild im neuen Window -->

mr.escape
"The man who trades freedom for security does not deserve nor will he ever receive either." - Benjamin Franklin"Wer seine Freiheit aufgibt, um Sicherheit zu erreichen, wird beides verlieren." - Georg Christoph Lichtenberg
bei Antwort benachrichtigen
Sigi Saudi mr.escape „Re: Pop-up mit JavaScript...“
Optionen

Danke Mr. Escape.
Leider kriegte ich das nicht hin.
Es wurden mit dem code 2 fenster geoeffnet, eins durch window.open und eins durch die zeile mit html-head-title.

Mein problem ist:
Ich habe eine html 4.01 (zertifiziert) seite erstellt mit 32 slides 102 x 77 drauf
(http://myweb.saudi.net.sa/skaelbert/P-Bkk1/bkkslides.html)
Wenn ich auf eines der slides klicke, wird ueber javascript window.open ein neues Fenster geoeffnet und das bild wird 640 x 480 angezeigt. Das funktioniert.
Aber leider kann ich mit diesem System erlaeuterungen zu den bildern nur mit "alt" anzeigen und das ist recht duenne und funktioniert nicht mit Firefox. Deshalb wollte ich mein Javascript aufbohren und eine Box (tablezelle oder frame oder was auch immer) hinzufuegen mit einer kurzen erlaeuterung zu dem jeweiligen bild.
Ich koennte natuerlich auch fuer jedes der 32 bilder eine eigene html page entwickeln und ueber href anzeigen, aber das will ich mir nicht antun. Deshalb brauche ich eine javascript loesung.
Ich habe gestern bei "W3Schools Online Webtutorials" mir einen schnellkurs in javascript und DOM verpasst, aber da fand ich auch nicht, was ich suchte. Das einfuegen von bildern mit javascript verschweigt man dort schamvoll.
Ich habe mein Javascript nun experimentiell so modifiziert, dass in das neue window einen table mit 2 reihen generiert wird. In einem array mit 32 elementen habe ich meine erlaeuterungen gespeichert, die ich mit document.write in die untere table zeile bringe.
Meine Frage nun, wie speichere ich die src zeilen mit den links zu den grossen bildern formatkonform in einem array und wie bringe ich diese arrayzelleninhalte in die erste table zeile, um die bilder anzuzeigen?

So, wie im folgenden quellcode angezeigt, geht es nicht.


// [script type="text/javascript"]

// var x;
// var pictures = new Array();
// var comments = new Array();

// pictures[1] = "[img src='"http://myweb.saudi.net.sa/skaelbert/P-// Bkk1/thumbs2/riverside3.jpg"']";

// comments[0] = "Picture1";
// comments[1] = "Picture2";
// x=1;

// document.write("[table border=1 width=100");
// document.write("[tr][td]");
// document.write(pictures[x]);
// document.write("[/td][/tr]");
// document.write("[tr][td align=center]");
// document.write(comments[x]);
// document.write("[/td][/tr]");
// document.write("[/table]");
// [/script]

(ich musste hier alles zu kommentaren machen und spitze klammern durch eckige ersetzen, weil Nickles den code sonst zu uebersetzen versucht)

Meine anfrage, wie programmiere ich das richtig, dass ich ein Array mit gueltigen img src adressen habe, ein array mit den kommentaren und das ganze in einen table mit 2 rows bringe, das bild oben, den text unten.
Gruss aus der +4 grad warmen wueste
SigiSaudi




Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Sigi Saudi Nachtrag zu: „Pop-up mit JavaScript“
Optionen

Hallo,
Nach langem programmieren mit einigen irrwegen hab' ich's nun gefunden.
Das probelisting unten funktioniert. Ich habe allerdings alle spitzen klammern durch eckige ersetzt, weil Nickels den code sonst uebersetzt.
Wenn man auf den button klickt, der per html generiert wird, wird ein bild aus dem Array eingesetzt in die obere Reihe des tables und der dazugehoerige text aus dem anderen array mit gleichem index erscheint in der unteren reihe des tables.
Das kann ich nun fuer meine show mit den 32 slides verwenden und ausloesen durch einen klick auf das slide, das vergroessert angezeigt werden soll (schon probiert)

[html]
[head]
[script type="text/javascript"]


/*
function insImag()
{
var x;
var pictures = new Array();
var comments = new Array();

pictures[0] = "http://myweb.saudi.net.sa/skaelbert/P-Bkk1/slides2/gmount.jpg";

pictures[1] = "http://myweb.saudi.net.sa/skaelbert/P-Bkk1/slides2/gmountchedi.jpg"

comments[0] = "Der Golden Mount, goldener Berg, ein künstlicher Hügel in Bangkok in der Nähe des Menam Chao Phrya, bebaut mit dem Wat Pu Khautong, den das Bild zeigt.";

comments[1] = "Wat Pu Khautong ist von einem goldenen Chedi (turmartige Spitze) gekrönt von dem das Bild die Spitze zeigt. Der goldene Chedi gab dem Hügel den Namen 'Golden Mount'";
x=0;

document.write("[table border=1 width=100]");
document.write("[tr][td]");

document.write('[img src="' + pictures[x] + '" width="640" height="480" alt="Test" /]');

document.write("[/td][/tr]");
document.write("[tr][td align=center]");
document.write(comments[x]);
document.write("[/td][/tr]");
document.write("[/table]");

/*alert(document.images[0].src);*/
}

*/
[/script]
[/head]

[body]
[form]
[input type="button" value="Open Image" onclick="insImag()"]
[/form]

[/body]

[/html]

Die eckigen klammern muessten durch spitze klammern ersetzt werden.
Aber der code arbeitet.

Eine frage:
Wie verhindere ich, dass Nickles einen einkopierten html oder javascript code uebersetzt? Wie zeige ich code als normalen text an?

Gruesse aus Riyadh
SigiSaudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen