---
title: "Javascriptpopup, anpassar sig till bild."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/124270-javascriptpopup-anpassar-sig-till-bild"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "tody"
published: "2005-03-13T11:24:02.000Z"
updated: "2005-03-19T12:25:34.000Z"
replies: 20
views: 591
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/124270-javascriptpopup-anpassar-sig-till-bild"
---

# Javascriptpopup, anpassar sig till bild.

_Sida 1 av 2._

## #1 — tody, 2005-03-13T11:24Z

Hej

Har ett problem jag skulle vilja ha hjälp med;

Har ett bildgalleri där man kan klicka på en bild så öppnas den i
 ett popupfönster, men jag vill att detta popupfönster ska
 anpassa sig till bildens storlek, alltså fall bilden är på width=450,
 height="600" så ska popuprutan bli lika stor. Är bilden bara
 width="50", height="150" så ska popuprutan bli så stor.

Hur löser man de?

Så här ser det ut nu <http://tody.1go.dk/bilduppladdning/bildvis.php> klicka tex på
 bilden test så ser ni att inte hela bilden visas i popupfönstret.

Så här ser min javascriptskod ut:

```php
<script language="JavaScript">
<!-- Begin
function popUp(url) {
props=window.open(url, 'poppage', 'toolbar=no, scrollbars=no,
 location=0, statusbars=no, menubar=no, resizable=no,
 width=200, height=300, left = 100, top = 100');
}
</script>
```

Permalänk: https://www.webforum.nu/p/124270

## #2 — cyprys, 2005-03-13T11:26Z

Det enda sättet jag löst just det problemet på är genom att läsa av bredden på bilden m.h.a. serverspråket jag använt. (ASP, .NET, php)

Sen skrivit in det direkt i javascriptkoden.

Permalänk: https://www.webforum.nu/p/1572006

## #3 — solbulle, 2005-03-13T12:06Z

<http://www.webforum.nu/showthread.php?s=&postid=393254#post393254>

Finns en uppsjö svar om du söker lite.

Permalänk: https://www.webforum.nu/p/1572025

## #4 — tody, 2005-03-13T12:15Z

Okej, hur löste du det då? Kan lite PHP själv.

Permalänk: https://www.webforum.nu/p/1572027

## #5 — tody, 2005-03-13T12:35Z

Missade ditt inlägg. Har försökt söka men inte riktigt vetat vad
 jag ska söka på, får ursäkta fall jag tar upp redan löst tråd.

Kollade på den andra tråden men förstod inte riktigt hur jag ska
 infoga koden så det blir rätt, har försökt men de blir fel.

Koden som stod i andra tråden:

```php
<body onLoad="storlek()"  onresize="storlek()" >

<script language="JavaScript" type="text/javascript">
<!--
function storlek(){
resizeTo(document.images['foo'].width,document.images['foo'].height)
}
//-->
</script>
```

Java-scriptskoden ska jag lägga längst upp mellan head taggarna förstår jag men sedan den andra koden?

Permalänk: https://www.webforum.nu/p/1572038

## #6 — bossse, 2005-03-13T19:18Z

Här ett som jag länkat direkt till bilder på webben!

```
<html> 
<head> 
<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src=filename; 
properties='height=0,width=0'; 
var imgWindow = window.open('','',properties); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden;} </style>';
html += '</head>'; 
html += '<body onBlur="window.close()" topmargin="0" leftmargin="0" >'; 
html += '<img src="'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();">'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script> 
</head> 
<body> 
Detta funkar väl som du tänkt? <br>
Stäng popupbilden genom att klicka var du vill på den. <br>
Funka i vart fall i Ie och Firefox,
<p align=right> 
<a href="javascript:bild(' [url]http://www.nordensark.se/bilder/leo.jpg[/url] ')"> 
<img src=" [url]http://www.nordensark.se/bilder/leo.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild(' [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url]')"> 
<img src=" [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild('http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg')"> 
<img src=" [url]http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
<a href="javascript:bild('http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg')"> 
<img src=" [url]http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
</p> 
</body> 
</html>
```

Permalänk: https://www.webforum.nu/p/1572213

## #7 — tody, 2005-03-15T14:56Z

Förstår inte hur jag ska få din koda att fungera **bossse** :/.
Någon annan som har någon kod eller kan beskriva för mig hur
 jag ska lösa det.

Som sagt denna koden stod i en annan tråd:

```php
<body onLoad="storlek()"  onresize="storlek()" >

<script language="JavaScript" type="text/javascript">
<!--
function storlek(){
resizeTo(document.images['foo'].width,document.images['foo'].height)
}
//-->
</script>
```

 

Förstår inte vart jag ska lägga in *\<body onLoad="storlek()"
  onresize="storlek()" \>*, ska det läggas i body taggen på den
 sidan mankan klicka på en bild för att den ska bli större? Den
 andra kodsnutten förstår jag att jag ska lägga längst upp mellan
 headtaggarna, men som sagt hur gör jag med bodykoden?

Permalänk: https://www.webforum.nu/p/1573095

## #8 — J.N., 2005-03-15T16:48Z

HEJ!

Det ska ligga på den sidan som du öppnar; det är ju den sidan du vill anpassa genom att kalla på funktionen.

Du har inte missat att skriva name="foo" på bilden?
Annars lär du få ett scriptfel.

Permalänk: https://www.webforum.nu/p/1573144

## #9 — tody, 2005-03-16T18:18Z

Hej igen,

Så här ser min kod ut nu, kanske blir lättare om jag lägger upp allt att förstå:

```php
<html>
<head>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">

<script language="JavaScript" type="text/javascript">
<!--
function storlek(){
resizeTo(document.images['foo'].width,document.images['foo'].height)
}
//-->
</script>

</head>
<body onLoad="storlek()"  onresize="storlek()" >

<?PHP
$objConn = include('connect.php');

$sql = "SELECT * FROM $tabell ORDER BY datum DESC"; 
$result = mysql_query($sql);
?>

<table>
<?
while($rad = mysql_fetch_array($result)) {
?>

<td class="bildgalleri" bgcolor="#F8F8F8" onMouseover="this.bgColor='#FFFFFF'" onMouseout="this.bgColor='#F8F8F8'">

<A HREF="javascript:popUp('bilder/<?php echo $rad['filenamn'] ?>')">
<img name="foo" class="bildgalleri2" width="120" height="120" src="bilder/<?php echo $rad['filenamn'] ?>"></A>
<br>
<? echo $rad['rubrik']; ?>
  </td>

<?
}
?>
</table>
</body>
</html>
```

Hoppas ni vet vad jag gjort för fel :/

Permalänk: https://www.webforum.nu/p/1573670

## #10 — J.N., 2005-03-17T08:47Z

HEJ!

Jag citerar mig själv:

> **J.N. skrev:**
>
> Det ska ligga på den sidan som du öppnar; det är ju den sidan du vill anpassa genom att kalla på funktionen.

Denna sida, eftersom du loopar genom ett recordset, visar ju alla bilder.

Permalänk: https://www.webforum.nu/p/1573855

## #11 — tody, 2005-03-17T19:38Z

Jo, men jag har ju ingen specifik sida för att visa en bild, utan den kommer ju automatiskt när man klickar på länken.

Permalänk: https://www.webforum.nu/p/1574190

## #12 — J.N., 2005-03-18T10:05Z

HEJ!

> **tody skrev:**
>
> Jo, men jag har ju ingen specifik sida för att visa en bild, utan den kommer ju automatiskt när man klickar på länken.

Ja, nu ser jag ju!

bilder/\<?php echo $rad\['filenamn'\]?\>
blir ju
bilder/bild.jpg

Och det är en helt annan sak!
Du öppnar ju endast bilden, inte en sida!
En bildsida är ju endast en bild, ingen kod av något slag alls.

Gör om länken till en php/html/asp-sida, lägg till javascriptet där istället, så blir det bättre!

Permalänk: https://www.webforum.nu/p/1574382

## #13 — tody, 2005-03-18T17:44Z

Men går det inte ordna utan att behöva göra en sida till. För då blir det ju ingen popupfunktion direkt, måste väll gå att lösa på något sätt?

Permalänk: https://www.webforum.nu/p/1574672

## #14 — tody, 2005-03-18T20:21Z

> **bossse skrev:**
>
> Här ett som jag länkat direkt till bilder på webben!
> 
>
>
> ```
> <html> 
> <head> 
> <script type="text/javascript"> 
> function bild(filename,winTitle) 
> { 
> var myImage = new Image(); 
> myImage.src=filename; 
> properties='height=0,width=0'; 
> var imgWindow = window.open('','',properties); 
> html = '<html>';
> html += '<head>';
> html += '<title>'+winTitle+'</title>'; 
> html += '<style type=text/css> body {overflow:hidden;} </style>';
> html += '</head>'; 
> html += '<body onBlur="window.close()" topmargin="0" leftmargin="0" >'; 
> html += '<img src="'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();">'; 
> html += '</body>'; 
> html += '</html>'; 
> imgWindow.document.write(html); 
> } 
> </script> 
> </head> 
> <body> 
> Detta funkar väl som du tänkt? <br>
> Stäng popupbilden genom att klicka var du vill på den. <br>
> Funka i vart fall i Ie och Firefox,
> <p align=right> 
> <a href="javascript:bild(' [url]http://www.nordensark.se/bilder/leo.jpg[/url] ')"> 
> <img src=" [url]http://www.nordensark.se/bilder/leo.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
> <a href="javascript:bild(' [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url]')"> 
> <img src=" [url]http://ftp.sunet.se/pub/pictures/animals/birds/duck2.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
> <a href="javascript:bild('http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg')"> 
> <img src=" [url]http://www.huntingground.freeserve.co.uk/scripts/pic04.jpg[/url] " height="50" width="50" alt="bilbeskrivning"></a> 
> <a href="javascript:bild('http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg')"> 
> <img src=" [url]http://lava.nationalgeographic.com/pod/pictures/normal/05751_44.jpg[/url]" height="50" width="50" alt="bilbeskrivning"></a> 
> </p> 
> </body> 
> </html>
> ```

Testade att köra den koden som du skrev **bossse**, men hur gör jag  ifall jag vill komma ner i mappen *bilder/*, har aldrig pysslat med javascript så vet inte riktigt hur jag ska greja det.

Försökte med denna koden, men vill inte funka:

\<script type="text/javascript"\> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src=filename; 
properties='height=0,width=0'; 
var imgWindow = window.open('','',properties); 
html = '\<html\>';
html += '\<head\>';
html += '\<title\>'+winTitle+'\</title\>'; 
html += '\<style type=text/css\> body {overflow:hidden;} \</style\>';
html += '\</head\>'; 
html += '\<body onBlur="window.close()" topmargin="0" leftmargin="0" \>'; 
html += '\<img src="**bilder/**'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();"\>'; 
html += '\</body\>'; 
html += '\</html\>'; 
imgWindow.document.write(html); 
} 
\</script\>

Permalänk: https://www.webforum.nu/p/1574721

## #15 — nitro2k01, 2005-03-18T20:29Z

Rekommenderar följande ändringar:

```
<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src=[b]"bilder/"[/b]+filename; 
properties='left=50,height=200'; 
// OBS! Ta bort mellarummet mellan about och : blank
var imgWindow = window.open('about:blank','_blank',properties); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden; margin: 0px;} </style>';
html += '</head>'; 
html += '<body onblur="self.close()" topmargin="0" leftmargin="0" >'; 
html += '<img src="'+myImage.src+'" onload="resizeTo (this.width,this.height);" name="bild" onclick="self.close();" />'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script>
```

Var i strukturen finns "bilder"?

/Redigerat

Permalänk: https://www.webforum.nu/p/1574722

## #16 — tody, 2005-03-18T22:43Z

Nu funkar det nästan perfekt!

Bara det att inte riktigt hela bilden kommer med, kolla på <http://tody.1go.dk/bilduppladdning/bildvis.php> , klicka på valfri bild så ser du/ni att inte riktigt hela bilden syns.

Vad kan vara fel?

Koden ser nu ut så här:

```php
<html>
<head>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">

<script type="text/javascript"> 
function bild(filename,winTitle) 
{ 
var myImage = new Image(); 
myImage.src="bilder/"+filename;
properties='height=0,width=0'; 
var imgWindow = window.open('','',properties); 
html = '<html>';
html += '<head>';
html += '<title>'+winTitle+'</title>'; 
html += '<style type=text/css> body {overflow:hidden;} </style>';
html += '</head>'; 
html += '<body onBlur="window.close()" topmargin="10" leftmargin="10" bottommargin="10">'; 
html += '<img src="'+myImage.src+'" onLoad="resizeTo (document.bild.width,document.bild.height); moveTo(50,200);" name="bild" OnClick="window.close();">'; 
html += '</body>'; 
html += '</html>'; 
imgWindow.document.write(html); 
} 
</script> 

</head>
<body>

<?PHP
$objConn = include('connect.php');

$sql = "SELECT * FROM $tabell ORDER BY datum DESC"; 
$result = mysql_query($sql);
?>

<table>
<?
while($rad = mysql_fetch_array($result)) {
?>

<td class="bildgalleri" bgcolor="#F8F8F8" onMouseover="this.bgColor='#FFFFFF'" onMouseout="this.bgColor='#F8F8F8'">

<A HREF="javascript:bild('<?php echo $rad['filenamn'] ?>')">
<img name="bild" target="_blank" class="bildgalleri2" width="120" height="120" src="bilder/<?php echo $rad['filenamn'] ?>"></A>
<br>
<? echo $rad['rubrik']; ?>
  </td>

<?
}
?>
</table>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/1574772

## #17 — bossse, 2005-03-19T08:51Z

Ändra dina marginaler till:

```
topmargin="0" leftmargin="0"
```

bottommargin kan väl du ta bort helt.

Permalänk: https://www.webforum.nu/p/1574815

## #18 — tody, 2005-03-19T10:32Z

Men var tvungen att lägga till det så bilden kom utanför kanten något, men hela bilden syns ju inte ändå.

Alltså längst ner försvinner endel av bilden.

Permalänk: https://www.webforum.nu/p/1574834

## #19 — bossse, 2005-03-19T11:47Z

Testa då med dessa ändringar på tre rader i scriptet.

```
html += '<style type=text/css> body {overflow:hidden;} #bild {margin-left:5px; margin-top:5px; margin-right:5px; margin-bottom:5px}</style>';

html += '<body onBlur="window.close()" id="bild">';
 
html += '<img src="'+myImage.src+'"  onLoad="resizeTo (document.bild.width+20,document.bild.height+40); moveTo(50,200);" name="bild" OnClick="window.close();">';
```

Permalänk: https://www.webforum.nu/p/1574866

## #20 — tody, 2005-03-19T12:15Z

**Tack bossse**, nu funkar det precis så som jag vill, tack!

Permalänk: https://www.webforum.nu/p/1574878

---

Tråden på webben: https://www.webforum.nu/amne/javascript/124270-javascriptpopup-anpassar-sig-till-bild  
Nästa sida: https://www.webforum.nu/amne/javascript/124270-javascriptpopup-anpassar-sig-till-bild/page2.md
