Popup automatisch an Bildgröße anpassen

M

monalisa

Grünschnabel
Hallo!

Brauche mal einen Rat:

Ich möchte ein Popup basteln in dem oben ein Logo, dadrunter ein Bild und ein "Schließen"-Button sind. Die Größe des Popups soll sich automatisch an die Größe (Breite) des Bildes in der Mitte anpassen.

Hat irgend jemand einen Tipp für mich?

Gruß + danke,
monalisa
 
Hi,monalisa
du könntest es so machen:
Code: 
<script type="text/javascript">
<!--
mW=30;//Zusätzliche Breite
mH=60;//Zusätzliche Hoehe
function winResize()
{
var wH=dH=wW=dW=0;
IE=(document.all&&!window.opera);
if(IE)
	{
	wW=document.body.offsetWidth;
	wH=document.body.offsetHeight;
	}
else
	{
	wW=window.innerWidth;
	wH=window.innerHeight;
	}
i0=document.images[0];
i1=document.images[1];
dW=i0.width;if(dW<i1.width){dW=i1.width;}dW=dW+mW;
dH=i0.height+i1.height+mH;
diffW=dW-wW;
diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
</script>
es berechnet die Fenstergrösse aus der Grösse von Banner und Bild.
(zuzüglich eines von dir einzusetzenden Wertes...bei mW + mH)....da musst du angeben,wieviel
Platz unabhängig von den Bildern noch verbraucht wird,...für den Button,etwaige Rahmen usw.....musste halt
ausprobieren,solange,bis keine Scrollbar mehr erscheint.

Dann wird der ermitelte Wert mit der Fenstergrösse verglichen und selbiges entsprechend resized.
 
Mensch, lasst die Leute doch mal selbst denken ;)

Nicht immer gleich Lösung vorknallen...ein paar Hinweise...und denn geht das ;)
 
@ fatalus

Kann es sein, das deine Funktion die erste Grafik aus dem Quelltext nimmt? - Die ist nämlich bei mir ein blank.gif und das Popup winzig. :confused:

Funktioniert deine Funktion auch für Netscape ab 4.7?

Danke!
 
Tja, denn doch lieber selbst machen ;)

Will ja nich gemein sein/nerven, aber das musste ich einfach mal loswerden ;)
 
@monalisa
....ja,die Bilder holt es sich aus dem Quelltext.....ich denk die stehen da drinne...
1.Logo
2.Bild
?
Es funktioniert auch in NN4.7 :)

@Lars
warum beschränkst du deine Einwürfe nicht einfach aufs posten von wenig hilfreichen Links;)
 
Zuletzt bearbeitet:
@ faltalus:

So hier der relevante Teil zum angucken:

<head><script language="JavaScript" type="text/javascript">
<!--
mW=30;//Zusätzliche Breite
mH=60;//Zusätzliche Hoehe
function winResize()
{
var wH=dH=wW=dW=0;
IE=(document.all&&!window.opera);
if(IE)
{
wW=document.body.offsetWidth;
wH=document.body.offsetHeight;
}
else
{
wW=window.innerWidth;
wH=window.innerHeight;
}
i0=document.images[0];
i1=document.images[1];
dW=i0.width;if(dW<i1.width){dW=i1.width;}dW=dW+mW;
dH=i0.height+i1.height+mH;
diffW=dW-wW;
diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
</script>
</head>
<body style="background-image: url(/global_images/header.gif); background-repeat: repeat-x; background-color:#cdd7d7" onload="winResize();">
<table width="100%" height="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40">&nbsp;</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" width="100%">
<tr>
<td width="19"><img src="blank.gif" width="1" height="1"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="19"><img src="blank.gif" width="19" height="1"></td>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td colspan="2"> <img src="blank.gif" width="1" height="10"></td>
</tr>
<tr>
<td><img src="test.jpg " width="100" height="190" alt="" border="0"></td>
<tr>
<td colspan="2"><img src="blank.gif" width="1" height="10"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="19"><img src="blank.gif" width="1" height="1"></td>
<td align="right"><a href="javascript:window.close();">schlie&szlig;en</a>&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td width="19">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>

Das Bild an dem die Größe angepasst werden soll ist in diesem Fall test.jpg. Irgend wie funktioniert das noch nicht richtig.

Danke, bist meine Rettung! :)
 
Alles Klar...das konnte natürlich nicht gehen,dein Logo steht ja nicht als <img> in der Seite,
und das Testbild nicht da,wo ich dachte :)
Dann machs so:
Code: 
<script type="text/javascript">
<!--
mW=75;//Zusätzliche Breite
mH=165;//Zusätzliche Hoehe
function winResize()
{
var wH=dH=wW=dW=0;
IE=(document.all&&!window.opera);
if(IE)
{
wW=document.body.offsetWidth;
wH=document.body.offsetHeight;
//document.body.scroll='no';
}
else
{
wW=window.innerWidth;
wH=window.innerHeight;
}
i0=document.bild;
dW=i0.width+mW;
dH=i0.height+mH;
diffW=dW-wW;
diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
</script>
Deinem Testbild gib den Namen 'bild',dann kommt nix durcheinander,wenn du noch andere Bilder in die Seite einfügst:
Code: 
<img src="test.jpg " width="100" height="190" alt="" border="0"name="bild">

Ganz oben im Skript kannst du dann wie erwähnt bei 'mW' und 'mH' je nach Bedarf die Fenstergrösse noch verändern,wenn mehr Inhalt in die Seite kommt.
Mit dem was momentan drinnen steht,kommts aber hin :)
 
Hallo noch mal!

Habe das Javascript jetzt eingebaut und es funktioniert auch wunderbar für den IE. Leider brauche ich für den Netscape noch eine vertikale Scrollbar.

Hast da noch mal jemand einen Tipp :confused:

<script language="JavaScript" type="text/javascript">
<!--
mW=65;//Zusätzliche Breite
mH=130;//Zusätzliche Hoehe
function winResize()
{
var wH=dH=wW=dW=0;
IE=(document.all&&!window.opera);
if(IE)
{
wW=document.body.offsetWidth;
wH=document.body.offsetHeight;
document.body.scroll='auto';
}
else
{
wW=window.innerWidth;
wH=window.innerHeight;
}
i0=document.bild;
dW=i0.width+mW;
dH=i0.height+mH;
diffW=dW-wW;
diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
</script>

Dickes Danke!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück