• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

dynamische Größenanpassung bei JS-Fenster

M

Metallica

Lounge-Member
Hi Leute,

ich verwende in meinem <head> folgende JS-Funktion um ein Fenster beim Klick auf eine Grafik zu erzeugen:
<script>
function winopen(){
window.open("Clipart.jpg","8B Home","toolbar=no,menubar=no,resizeable=no")
}
</script>


im Body greife ich wie folgt auf die function zu:
<a href="#" onclick="winopen()"><img src="Clipart.jpg" border="0"></a>

Und jetzt zu meinem Problem:
Ich habe insgesamt 21 Cliparts (genauergesagt Thumpnails). Bei jedem Klick auf eines der Bilder will ich nun auf die JS-function zugreifen um ein neues Fenster zu öffnen, dass sich dynamisch der Breite und Höhe des großen Bildes anpassen sollte.

Ist das möglich?? Wen ja, wie??

CU
 
Kein Problem,...

...denn Du kannst ja mit ".height" und ".width" auf die Größe eines vorher definierten globalen (!) Objektes zugreifen.
Vergiss nicht, die Fenster kaskadierend darzustellen... und das ist für NS und IE über unterschiedliche Parameter möglich (s.u., z.B. "left" und "screenX")

Ich benutze dafür etwas in der Art:

-----------------------------------------------------8<---------------- schnipp -----------------------------
var ow_i = 0;
// image has to be global: otherwise no properties are available
var Bild = new Image(); Bild.src="../images/portrait01.jpg";
var Bild1 = new Image(); Bild1.src="../images/portrait02.jpg";
[...usw...]

function openWindow( b ) // hier muß für deinen Zweck noch das anzuzeigende Bild übergeben werden
{
imgTitle = "Da lacht die Welt";
paramString = '';
imgWidth = Bild.width * 3; //vergrößern
imgHeight = Bild.height * 3;

// parameter string for open window
paramString = 'height=' + (Bild.height*3 + 80) + ',width=' + (Bild.width*3) + ',screenX=' + ( 60 + ow_i*4 ) + ',screenY=' + ( 90 + ow_i*22 );
if (ie4) { paramString = 'height=' + (Bild.height*3 + 80) + ',width=' + (Bild.width*3) + ',left=' + ( 60 + ow_i*4 ) + ',top=' + ( 90 + ow_i*22 ); }
PopUp = window.open( 'picture.html' + '?' + 'imgTitle='+escape( imgTitle )+'&imgWidth='+(Bild.width*3)+'&imgHeight='+(Bild.height*3)+'&imgSrc='+escape( imgSrc ), 'Max' + ow_i, paramString );
ow_i++;
}
-----------------------------------------------------8<---------------- schnapp -----------------------------

Diese Funktion zeigt allerdings stets das gleiche Bild an. Den Rest must Du also noch selber bauen...
 
Hi,

dieser Teil ist mir nicht ganz klar:
// parameter string for open window
paramString = 'height=' + (Bild.height*3 + 80) + ',width=' + (Bild.width*3) + ',screenX=' + ( 60 + ow_i*4 ) + ',screenY=' + ( 90 + ow_i*22 );
if (ie4) { paramString = 'height=' + (Bild.height*3 + 80) + ',width=' + (Bild.width*3) + ',left=' + ( 60 + ow_i*4 ) + ',top=' + ( 90 + ow_i*22 ); }
PopUp = window.open( 'picture.html' + '?' + 'imgTitle='+escape( imgTitle )+'&imgWidth='+(Bild.width*3)+'&imgHeight='+(Bild.height*3)+'&imgSrc='+escape( imgSrc ), 'Max' + ow_i, paramString );
ow_i++;
}

Warum ruftst Du picture.html auf. Ich dachte, das große Bild wird nur in einem Fenster dargestellt??
Hab's übrigens mal mit einer test.htm probiert. Der Browser sagt mir aber immer "Fehler in Seite".
 
Na klar,

...das Skript ist natürlich nicht einfach so verwendbar. Sollte ja nur zur Veranschaulichung sein.
Also:

"paramString = 'height=' + (Bild.height*3 + 80) + ',width=' + (Bild.width*3) + ',screenX=' + ( 60 + ow_i*4 ) + ',screenY=' + ( 90 + ow_i*22 ); "

ist für die Größe, Platzierung und Kaskadierung der einzelnen Fenster zuständig. ow_i ist ein simpler Index, der über die geöffneten Fenster läuft, in denen das Bild in 3-facher Orginalgröße dargestellt wird. Diese Multiplikation fällt bei Dir schonmal weg!
Letztlich interessant (aufgrund deiner Fragestellung) ist nur height und width in Verbindung mit der globalen Deklaration der Bildobjekte!

Ob Du die Kaskadierung nutzen willst, bleibt natürlich dir überlassen. Kurze Erläuterung:
"screenX" und "screenY" legen beim NN die Koordinaten fest. Dies entspricht "left" und "right" im IE. Der Ausdruck "60 + ow_i*4" bewirkt also, dass das erste Fenster eine x-Koordinate von 60 (Pixeln vom linken Bildrand) hat, das zweite 64, das dritte 68 usw. Das ist einfach ein feature, was dem User erlaubt, bei mehreren zusätzlich geöffneten Fenstern diese wiederzufinden.

Du brauchst sicher den Aufruf der zusätzlichen Datei "picture.html" nicht, da Du nur das Bild darstellen möchtest. In dem hier vorliegenden Fall dagegen sollte das Bild zusätzlich noch eine "Bild drucken" und "Fenster schliessen" Funktionalität bieten, die dann in der "picture.html" lokalisiert ist.
Du kannst also den Code massiv abspecken und anstelle von "picture.html" (oder "clipart.jpg") das Objekt "Bild.src" in den window.open-Aufruf einsetzen.
So long,
jackengott
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben