Homepage selbermachen 7.851 Themen, 35.604 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
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