Resize image, inline

youradds · May 18, 2006

Hi,

I'll give a quick overview of what/what I'm *trying* to achive =)

Basically, we have a nice CSS design - which utalizes <divs> for our content "boxes".

We basically offer essays to view. These include images. However, I'm come across a bit of a roadblock. Basically, we have 400 pixels (width) available - and anything over that, throws IE totally off the scent, and makes our main content <div> show up below the menu

I managed to find this post on another forum;

Code:

<script language="Javascript">

function setImg() {
w = img.width; h = img.height;
if (h>200) { h=200, w=200 }
document.image1.width = w;
document.image1.height = h;
document.image1.src = img.src;
}

window.onload = setImg;
</script>

However, I can't seem to get it working right

Basically - all images are named imagexx.jpg (or .gif)
We have the number of images available (so a numImages= xxx; field would be feesible)

Unfortunatly, Javascript is not for fortae

Can anyone shed any light on a possible solution?

NB: I've tried using Image::Magick and Image::Size on the server that holds the images, to do the resizing before sending to the user - but thats had other implications (i.e a script would need to be run every time a new essay is added to the site , and go through to check every single image, to make sure it abides by the dimension rules).

TIA for *any* help/ideas/suggestions

Cheers

Andy

youradds · May 18, 2006

Hi,

Managed to find a solution by Adam, on this forum

)

Code:

<html>
<head>
<script>
var maxSize = 30;

function getImg(src){
  var oImg = new Image();
  oImg.src = src;
  var proportion = ( oImg.width > oImg.height ? oImg.width / maxSize : oImg.height / maxSize );
        
   var newHeight = oImg.height / proportion;
   var newWidth = oImg.width / proportion;
   document.write('<img src="'+src+'" width="'+newWidth+'" height="'+newHeight+'">");
}
</script>
</head>
<body>
<script>getImg("myImg.jpg")</script>

Thanks Adam!

Andy

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Resize image, inline

youradds

Programmer

youradds

Programmer

Similar threads

Part and Inventory Search

Sponsor