Homepage selbermachen 7.851 Themen, 35.615 Beiträge

JavaScript window.open: Zentrieren von Bildern im Window

Sigi Saudi / 10 Antworten / Flachansicht 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