Homepage selbermachen 7.852 Themen, 35.619 Beiträge

JavaScript window.open: Zentrieren von Bildern im Window

Sigi Saudi / 10 Antworten / Baumansicht Nickles

Hallo Gemeinde,
Ich bin dabei eine homepage aufzubauen. Ich habe einige bilder, die kleiner auf der page angezeigt werden. Wenn auf das bild geklickt wird, wird das bild vergroessert. Das erreiche ich mit der JavaScript routine window.open, in dem ich das bild vergroessert anzeige:

function insertImg()
{
var width = 680;
var height = 510;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width;
params += ', height='+height;
params += ', top='+top;
params += ', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';

// alert("The params are \n" + params + "\nResolution " + screen.width + "x" + screen.height);

window2=window.open("","pictwin", params);
window2.focus();
}

Das ergebnis ist wie folgt:

http://myweb.saudi.net.sa/skaelbert/Messages/window.open.jpg

Im prinzip funktioniert die prozedur ja ganz gut. Das neue window wird zentriert auf dem bildschirm geoeffnet und zentriert in abhaengigkeit von der screen resolution, alles gut soweit. Was mich stoert ist, dass das bild im neuen window nicht zentriert ist.
Das bild hat im original eine aufloesung von 640 x 480.
Gebe ich diese werte vor fuer 'width' und 'height', wird das bild etwas kleiner angezeigt mit einem zoom cursor als kleine lupe mit einem + darauf. Wenn ich die cursor lupe klicke, fuellt das bild das gesamte window und ist zentriert.
Wenn ich die cursor lupe nicht haben will, sondern das bild gleich in voller groesse anzeigen will, muss ich die window.open parameter 'hight' und 'width' um je 40 pixel groesse machen als das bild gross ist. Dann wird das bild von vornherein voll angezeigt, aber eben nicht zentriert.
Mein problem laesst nach meiner Ansicht 2 loesungen zu, die ich aber nicht zu programmieren weiss:
1. Eine zoom-in instruction muss in die routine eingefuegt werden, die den klick auf das fenster mit dem zoom cursor erspart.
2. Das bild muss durch zusatz-instructionen zentriert werden in das geoeffnete fenster.
Ich weiss weder, wie ich das eine, noch das andere programmieren soll.
Problem 2:
Eines meiner Bilder, eine landkarte von Thailand, ist vertikal groesser als der Bildschirm. Ich kann nun das window dimensionieren, wie ich will. Das bild wird immer vollstaendig und verkleinert in dem neuen window angezeigt. Es ist immer ein zoom cursor vorhanden, und ein klick vergrossert die karte dann auf originalgroesse, wobei der untere teil erst einmal nicht angezeigt wird. Ich habe den parameter 'scollbar=yes' eingefuehrt, aber ohne zoom cursor klick geht es nicht. Wie kann ich erreichen, dass das bild von vornherein mit voller 'width' und mit einer 'height' angezeigt wird bis zu der groesse, die zu der 'width' passt? Mit der scroll bar kann dann jeweils der gewuensche Ausschnitt in das window gescrollt werden.
Wer kann mir helfen?
Viele Gruesse aus der Wueste
SigiSaudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
ewbayern Sigi Saudi „JavaScript window.open: Zentrieren von Bildern im Window“
Optionen

Hallo sigi saudi,

bin kein Profi, habe aber mal eben etwas probiert, bei mir funktioniert es so:

Statt 680 x 510 gibst Du die echte Bildgröße an: 640 x 480, plus jeweils einen Ausgleichswert:

var width = 640 + 20;
var height = 480 + 28;

So sollte das Bild dann einigermaßen mittig erscheinen, einfach mal mit den Werten
etwas spielen. Leider macht der Firefox das nicht ganz korrekt mit.

Ansonsten kannst Du ja auch für jedes Bild eine eigene html-Datei erstellen,
in der Du dann das Bild per align="center" und valign=middle" mittig setzt
und in der window.open-Anweisung diese Html-Datei aufrufst, der kannst Du
dann auch noch einen Browser-Titel geben, z.B. die Bezeichnung des Bildes.

Hinweis:
Es gibt im IE unter "Extras - Internetoptionen - Erweitert - Multimedia" die Option
"Automatische Bildgrößenanpassung aktivieren". Ist die bei Dir gesetzt? Hiermit
wird auch das Verhalten der Bilder gesteuert. Schalte es mal an bzw. aus.
Allerdings weiß man ja nicht, wie es beim Betrachter eingestellt ist.

Gruß
ewbayern

bei Antwort benachrichtigen
Sigi Saudi ewbayern „Hallo sigi saudi, bin kein Profi, habe aber mal eben etwas probiert, bei mir...“
Optionen

Hallo ewbayern,
Vielen dank fuer deine antwort.
Der Ausgleichswert arbeitet nicht. Das weiss ich jetzt genau, weil ich in meine routine nach der aufbereitung der parameter eine JavaScript alert box gesetzt habe, die mir die parameter (ich habe sie "params" genannt) anzeigt, bevor sie an "window.open" uebergeben werden. Sieh den ablauf in folgender JavaScript prozedur:

function insertImgThep()
{

var width = 540+40;
var height = 480+30;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width;
params += ', height='+height;
params += ', top='+top;
params += ', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';

alert("The params are \n" + params + "\nResolution " + screen.width + "x" + screen.height);

window2=window.open("","pictwin", params);
window2.focus();
}

Die alert box ist die instruction vor dem "window.open" und sie zeigt exakt an, was an "window.open" uebergeben wird:

http://myweb.saudi.net.sa/skaelbert/Messages/VariableWidth.jpg

Die werte fuer "width" und "height" sind die ersten beiden in der alert meldung und die werte sind 680 und 510.
Die addition ist also schon ausgefuehrt, bevor "window.open" die parameter erhaelt und die eingabe "Bildweite plus variabler Wert" bringt nichts, denn "window.open" sieht nur das additionsergebnis als komplette zahl. War aber einen versuch wert.
Ich werde mich mal auf deinen hinweis stuerzen, eine HTML prozedur zu schreiben und diese prozedur im "windows.open" aufrufen. Diesen trick kannte ich noch nicht und werde ihn probieren.
Ich werde dann einen table generieren ueber das ganze aktive fenster und das bild in diesem table zentrieren. Mal sehen, wie's geht. Ich melde mich dann wieder.
Vielen dank und viele gruesse aus der 47 grad celsius warmen wueste
Sigi Saudi


Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
ewbayern Sigi Saudi „Hallo ewbayern, Vielen dank fuer deine antwort. Der Ausgleichswert arbeitet...“
Optionen

Hallo Sigi Saudi,

schalte mal die "Automatische Bildgrößenanpassung" wie im ersten Kommentar beschrieben ab,
dann funktioniert es auch richtig. Browser danach immer neu starten! Hier mein Testcode:
_______________________________________
function newwindow()
{
var width = 540 + 20;
var height = 480 + 28;
var left = (screen.width - width)/2;
var top = ((screen.height - height)/2) - 35;
// var left = left;
// var top = top;
var params = 'width='+width;
params += ', height='+height;
params += ', top='+top;
params += ', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';

alert("The params are \n" + params + "\nResolution " + screen.width + "x" + screen.height);

window2=window.open("bilder/bild2.jpg","picshow", params);
window2.focus();
}
_______________________________________
Die Parameter werden bei mir auch in der Alertbox richtig angezeigt - inklusive Ausgleichswerte.
Aber es ist nicht wirklich die Lösung! Es gibt zwar die Möglichkeit, per Javascript die Breite und
Höhe des aktuellen Bildes zu ermitteln, die könnte man dann als Parameter bei unterschiedlich
großen Bildern einsetzen, aber mir ist das bisher nich nicht gelungen - warum auch immer.

Die "Automatische Bildgrößenanpassung" ist aber genau der kritische Punkt, da man nicht weiß,
ob sie beim Nutzer ein- oder ausgeschaltet ist. Deshalb ist es sinnvoll, die Anzeige durch eine separate Datei z.B. "vollbild_01.html" zu steuern - Aufruf: window2=window.open("vollbild_01.html","picshow", params);

Wenn es sich um immer gleichgroße Bilder handelt, ist das ja auch einfach, bei unterschiedlichen Größen muss die Tabelle als Bildcontainer natürlich immer wieder neu angepasst werden, damit es schick aussieht.
Ein kleiner Trick für solche Fälle: Mache Dir ein Leerbild mit der größten Auflösung Deiner Bilder plus ca. 25 Pixel.
Nun setzt Du in dieses Leerbild mit weißem oder andersfarbigem Hintergrund einen 1-Pixel-breiten Rahmen als Bildumrandung - ca. 15 Pixel vom Rand des Leerbildes. In diesen Rahmen platzierst Du dann alle Deine Bilder mittig und speicherst sie neu ab. So sieht es durch den Rahmen wenigstens einigermaßen schick aus, alle Bilder erscheinen mittig im Anzeigefenster und Du musst nur eine Tabelle mit fester Größe definieren. Aber ob Dir das zusagt?

Bastle gerade an einer speziellen Fotoshow mit weichen Überblendungen sowie Slideshow mit Sound für eine Webseite. Problem: nicht alle Javascript-Routinen funktionieren in Firefox, habe aber nun eine gefunden und muss sie entsprechend der Webseite anpassen.

Gib mal Nachricht, ob und wie Du das Problem gelöst hast.

Grüße aus dem doch etwas kühleren Bayern
ewbayern

bei Antwort benachrichtigen
Sigi Saudi ewbayern „Hallo Sigi Saudi, schalte mal die Automatische Bildgrößenanpassung wie im...“
Optionen

Hallo ewbayern,
Vielen dank fuer deine weitergehenden erlaeuterungen, aber mein problem habe ich geloest. Ich habe in einem anderen beitrag zu diesen thraed beschrieben, wie.
Ich baue mit JavaScript befehlen document.write eine komplette HTML seite auf in die ich mein jeweiliges bild embedde, dessen adresse ich aus einem array hole, wenn ich auf das bild klicke.
Deine ausfuehrungen zu dem ausgleichswert kann ich nicht nachvollziehen. Ich bin von Haus aus VisualBasic Net programmierer, und wenn ich eine Formel eingebe in eine variable, finde ich nach der abarbeitung des befehls in der variablen immer das ergebnis. Etwas anderes ist nicht moeglich. Das wuerde das programmieren auf den kopf stellen.

Wenn ich also folgendes programmiere:

Dim x as Integer

x = 640 + 40

Dann erhaelt x nach der abarbeitung der instruction immer! den wert 680 und nicht etwa 640+40
Anders geht es auch in JavaScript nicht.

Will ich hingegen in einer variablen als wert "640 + 30" sehen, muss ich wie folgt vorgehen;

Dim x as String

x = "640 + 30"

Fuer JavaScript wuerde das z.b. bedeuten:

var width = "640 + 40"

Dann wird die var width nach der uebersetzung 640 + 40 enthalten.
Aber die apostrophe kennzeichnen "640 + 40" als text und das wuerde dann spaetestens in der window.open instruction zu einer fehlermeldung fuehren und die routine wuerde abgebrochen, weil ein numerischer wert erwartet wird.

var width = 640 + 40 fuehrt auf jedem rechner und in jedem explorer nach abarbeitung der intruction immer zum ergebnis 680. Es wird niemals ein konstrukt wie 640 + 40 oder 640+4= uebergeben, sondern immer und ausschliesslich 680.
Das ist nun mal so.

Leider weiss ich nicht, wie ich eine HTML routine in einen Nickles thread eingebe.
Wenn du es weisst, schreib es bitte kurz und dann zeige ich die neue bildzentrierungsroutine hier mal an.
Wenn ich das script einfach nach Nickles reinkopiere, wird es ausgefuehrt und hat dann keinen wert mehr.
In meinem anderen neuen beitrag zu diesem thraed habe ich das ergebnis gezeigt.
Gruss aus der Wueste
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Sigi Saudi Nachtrag zu: „JavaScript window.open: Zentrieren von Bildern im Window“
Optionen

Hallo Gemeinde,
Ich habe das problem geloest! Habe ein wenig mit JavaScript und HTML rumexperimentiert mit folgendem Ergebnis:
Da ich bis zu 34 Bilder wahlweise anzeigen will durch's klicken auf's bild, ist das schreiben einer eigenen HTML seite fuer jedes bild recht muehsam und es kostet ziemlich viel webspace.
Deshalb habe ich die window.open instruktion in die schublade gelegt. Stattdessen generiere ich mit JavaScript jeweils fuer jede bildanzeige auf's neue eine HTML seite, in die ich die jeweilige internet adresse des geforderten bilds aus einem array einfuege und das entsprechende bild anzeige. In einem anderen array habe ich einen kommentar fuer das jeweilige bild geschrieben, den ich in die fussreihe des tables einfuege. Den jeweiligen index uebergebe ich mit dem aufruf der routine.
Die JavaScript routine sieht wie folgt aus:

(Leider weiss ich nicht, wie ich in diese Nickles Box HTML hineinbekomme. Der Code wird immer ausgefuehrt, aber nicht als text angezeigt. Wer kann mir helfen??)



Das Ergebnis sieht wie folgt aus:

http://myweb.saudi.net.sa/skaelbert/Messages/RoyalBarque.jpg

Auf einem gruenen Hintergrund wird das jeweilige bild gerahmt angezeigt. Die window.open prozedur ist sehr basic und erlaubt fuer den zweck, den ich brauche, nicht zuviel variationen.
Gruss aus der Wueste
Sigi Saudi.

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
ewbayern Sigi Saudi „JavaScript window.open: Zentrieren von Bildern im Window“
Optionen

Hallo Sigi Saudi,

hier gibt es einen Converter, der das für Dich erledigt:
http://www.gloeckner-nbg.de/tipps/converter.htm

Den neuen Text kannst Du dann posten. Mehr Eklärung dazu auch hier:
http://www.nickles.de/static_cache/538349582.html

Zu allem Anderen später mehr, bin etwas im Stress und deshalb in Zeitnot.

Gruß
ewbayern

bei Antwort benachrichtigen
Sigi Saudi ewbayern „Hallo Sigi Saudi, hier gibt es einen Converter, der das für Dich erledigt:...“
Optionen

Hallo ewbayern,
Wenn das so ist, dann kann ich die HTML tags ja auch in den Windows Notepad laden und alle spitzen klammern auf "" durch "gt" ersetzen. Dann braucht man keine Internet hilfe!
Mein JavaScript listing liest sich wie folgt:


&ltscript language="JavaScript"type="text/javascript"&gt


function insImag(x)
{

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

pictures[0] = "http://myweb.saudi.net.sa/skaelbert/slides/watarun62.jpg";
pictures[1] = "http://myweb.saudi.net.sa/skaelbert/slides/skyline6.jpg";
pictures[2] = "http://myweb.saudi.net.sa/skaelbert/slides/thep.jpg";

comments[0] = "Wat Arun, der Tempel der Morgenröte";
comments[1] = "Die Skyline von Bangkok, Rama IV Road";
comments[2] = "Ein 'Thep' (Engel), von dem Bangkok, Stadt der Engel, ihren Namen bekam";


document.write("&lthtml&gt&lthead&gt&lttitle&gtImage Display&lt/title&gt&lt/head&gt");
document.write("&ltbody bgcolor=#00ffff&gt");

document.write("&ltcenter&gt");
document.write("&lttable border=12&gt");

document.write("&lttr&gt&lttd&gt");

if (x == 2)
{
document.write('&ltimg src="' + pictures[x] + '" width="281" height="500" alt=""&gt');
}
else
{
document.write('&ltimg src="' + pictures[x] + '" width="640" height="480" alt=""&gt');
}

document.write("&lt\/td&gt&lt\/tr&gt");
if (x == 2)
{
document.write("&lttr bgcolor=#00ccff&gt&lttd align=center width=281&gt");
}
else
{
document.write("&lttr bgcolor=#00ccff&gt&lttd align=center width=640&gt");
}
document.write(comments[x]);
document.write("&lt\/td&gt&lt\/tr&gt");
document.write("&lttr bgcolor=#00ccff&gt&lttd align=right&gt");
document.write('&lta href="http://myweb.saudi.net.sa/skaelbert/Messages/frontpageN.html"&gtHier geht es zurück &nbsp&nbsp&nbsp&lt\/a&gt');
document.write("&lt\/td&gt&lt\/tr&gt");


document.write("&lt/table&gt&lt/body&gt&lt/html&gt");
document.write("&lt/center&gt");
/*alert(document.images&lt0&gt.src);*/
}

&lt/script&gt

Hier der aufruf aus der originalen HTML routine:

&lttr align="center"&gt
&lttd height="100"&gt
&lta href="http://myweb.saudi.net.sa/skaelbert/slides/thep.jpg" target="pictwin" onClick="insImag(2)">
&ltimg border="1" src="http://myweb.saudi.net.sa/skaelbert/slides/thep.jpg" alt="Ein 'Thep' (Engel), von dem Bangkok, Stadt der Engel, ihren Namen bekam" width="120" height="250">
&lt/a&gt
&lt/td&gt
&lt/tr&gt

Mit diesen beiden routinen bekomme ich folgendes bild in ein fenster mit hellgruenen hintergrund:

http://myweb.saudi.net.sa/skaelbert/Messages/EinThep.jpg

Ich baue also mit den document.write instructions eine komplette neue HTML seite auf, in die ich das ueber Index 'x' markierte picture[x] und unten die markierten comments[x] einfuege.

Das kompletter listing kann man ueber

http://myweb.saudi.net.sa/skaelbert

meine homepage also, unter dem pulldown menuepunkt "Thailand De" in einigen links finden.
In dem unterverzeichnis "Message" experimentiere ich mit diesen, fuer mich neuen routinen. Ich versuche nun, die window.open routine zu kombinieren mit der weiter oben einkopierten routine, weil mich die toolbars in dem window stoeren, in das ich mit der o.a. routine das bild aufbaue.
Oder weisst du, wie man diese toolbars hiden kann mit einem JavaScript instruction oder einem HTML tag?
Viele Gruesse aud der Wueste
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Sigi Saudi Nachtrag zu: „JavaScript window.open: Zentrieren von Bildern im Window“
Optionen

Hallo Gemeinde,
Ich loeste mein problem nun endgueltig durch kombinieren der window.open routine mit meiner routine, in der ich mit JavaScript eine neue HTML seite mit dem jeweiligen Bild und einer textzeile mit document.write instructions aufbaue.
Das Ergebnis sieht wie folgt aus:

http://myweb.saudi.net.sa/skaelbert/Messages/WinPictCenter.jpg

Das ist mehr, als ich urspruenglich vorhatte. Das bild ist zentriert embedded in ein window.open fenster ohne toolbars.
Mein Problem ist geloest.
Die listings sind meinen vorherigen beitraegen enthalten.
Gruss aus der Wueste
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
ewbayern Sigi Saudi „JavaScript window.open: Zentrieren von Bildern im Window“
Optionen

Hallo Sigi Saudi,

will mich wie versprochen doch noch einmal melden.

Hab Dank für die detaillierte Beschreibung Deiner Lösung.

Leider bin ich derzeit dermaßen mit aktuellen Projekten ausgelastet,
dass ich keine Zeit finde, es mal nachzuvollziehen bzw. umzusetzen.
Sobald wieder Zeit ist, werde ich mich damit beschäftigen.

Bis dahin alles Gute und viele Grüße in die Wüste

ewbayern

bei Antwort benachrichtigen
Sigi Saudi ewbayern „Hallo Sigi Saudi, will mich wie versprochen doch noch einmal melden. Hab Dank...“
Optionen

Hallo ewbayern,
Danke fuer deine antwort.
Hier war es heute morgen angenehm kuehl, nur 29 grad Celsius.
Viele gruesse aus der metropole in der wueste
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen