Re-sizing images in browser

@jpmoriartyNov 22.2002

I’m wondering if there’s a way in which I can resize an image automatically in a browser. I have a slide show that users can click through which uses java script to change the image that’s displayed. I effectively want the image to go into a table that’s 360 wide, but some of the images are smaller (which I don’t want to be scaled up by simply doing a width=360 command) and some are wider. Superbly of course, if I set the table width to 360, then if the image is wider it just ignores my telling it to be 360.

Is there a way I can set a table width that ~~[B]~~cannot[/B] be altered, so that if i put a 400px wide image in it it automatically gets scaled down to 360? Maybe there’s some java script out there that spots if an image is over a certain width and scales it down if it is, but leaves it if it isn’t. Any idea’s folks?

FYI The page in question is at ~~[URL=http://www.bedgeburyschool.co.uk/school/art.gallery/gallery.html]~~www.bedgeburyschool.co.uk/school/art.gallery/gallery.html[/URL]

Many thanks

to post a comment

15 Comments(s) _↴

@Zach_ElfersNov 22.2002 — #Yes, but have in mind that they may get degraded in quality when you do this. <img src="src of image" width="whatever" height="whatever">?

@jpmoriartyauthorNov 22.2002 — #you've not read what I've written, but thanks for trying.

I know that you can put width and height parameters into the img tag, but I'm using a java script to produce the slide show so the images will all have the same tag, but will not necessarily be the same dimensions. It's because of the degrading that I dont want to set every image to be a specific width - if it's less than 360 then it can stay as it is.

What I want, as I stated above, is some way of constraining the table so that it WILL NOT go larger than 360: that way, if the image is 300x300 (say) it will display at 300x300, but if the image is 400x400, it will not fit into the table, so it will be displayed at 360x360.

@Beach_BumNov 22.2002 — #assuming you named the target image1 and the frame name is target in my example.

parent.target.document.image1.width = 500

parent.target.document.image1.height = 375

parent.target.document.image1.src = "xxx.jpg"

just inclide tha parameters each time with the new picture.

@jpmoriartyauthorNov 22.2002 — #Many thanks again, but I really dont think people are reading what the problem is - either that or I'm just not explaining it properly.

I DO NOT WANT to have to specify width and heigh parameters - if I could do that why not just resize the image myself? What I want is for it to happen AUTOMATICALLY - I DO NOT WANT TO HAVE TO SPECIFY WIDTH AND HEIGHT PARAMETERS. If the image is too wide, then it needs to be resized so that the width is 360 (or less) and the height can be what-ever, but, and I stress this now, [B]I DO NOT WANT TO HAVE TO SET THE WIDTH AND HEIGHT PARAMETERS FOR EACH IMAGE![/B]

Hope this clears things up...

@CharlesNov 22.2002 — #[font="georgia"]To begin with, keep in mind that about 12% of users do not surf the web using JavaScript and for us you have no gallery, just a dead link. But assuming you want to alienate us you need to know that you cannot do what it is that want to do. The position and size of an image in a document are set when the document is displayed in the web browser and cannot be changed using JavaScript (the width and height properties are read-only for these objects).[/quote] ( http://forums.webdeveloper.com/newreply.php?action=newreply&threadid=93 )

Which also means that each of your images need to be the same size for the swapping to work at all. [/font]

@Beach_BumNov 22.2002 — #Just trying to help you get to something that can work for you - rather than having to resize the images. If you can write one line of script for each picture you can write three. If you don't like this solution, OK.

What you are asking - you cannot do.

BUT YOU DON"T NEED TO SHOUT AT US, we are only trying to help.

@Zach_ElfersNov 23.2002 — #[i]Originally posted by jpmoriarty [/i]

[B]you've not read what I've written, but thanks for trying.

I know that you can put width and height parameters into the img tag, but I'm using a java script to produce the slide show so the images will all have the same tag, but will not necessarily be the same dimensions. It's because of the degrading that I dont want to set every image to be a specific width - if it's less than 360 then it can stay as it is.

What I want, as I stated above, is some way of constraining the table so that it WILL NOT go larger than 360: that way, if the image is 300x300 (say) it will display at 300x300, but if the image is 400x400, it will not fit into the table, so it will be displayed at 360x360. [/B][/QUOTE]

Now I understand you after rereading it. If you have preloaded your images, depending on which way you did it, They could look like this. The slideshow script would also have to be a certain way:

imageName = new Image();

imageName.src = "image.gif";

Inside the () of new Image put the width first, comma, and then the height. You will just have to make sure the image isn't over 360, and manually type in the size. I don't know of any method to keep a table from resizing. Sorry if I'm not helping, I hope this helps!?

@jpmoriartyauthorNov 23.2002 — #thanks again but that's still not what I'm after. If I was to go to the trouble of finding out the width and height of them all then I might as well resize them in photoshop so that they're not over 360. I want to be able to leave the page to novices though, explain to them how to add new images to the page and then leave them to it. I dont want the hassle of having to go through the process of explaining how to resize images and the like if the image is over 360 etc etc. I want them to be able to add an image and have done with it.

Check your guestbook too - i went to the same school as tolkein!

@Zach_ElfersNov 23.2002 — #[i]Originally posted by jpmoriarty [/i]

[B]thanks again but that's still not what I'm after. If I was to go to the trouble of finding out the width and height of them all then I might as well resize them in photoshop so that they're not over 360. I want to be able to leave the page to novices though, explain to them how to add new images to the page and then leave them to it. I dont want the hassle of having to go through the process of explaining how to resize images and the like if the image is over 360 etc etc. I want them to be able to add an image and have done with it.

Check your guestbook too - i went to the same school as tolkein! [/B][/QUOTE]

Did you know him?

@jpmoriartyauthorNov 26.2002 — #Sorry about that earlier folks - was on a very tight deadline and needed answers fast. I shouldnt have shouted at people who were graciously trying to help, so I offer my profound apologies and thanks to all.

Dont want to turn this into a LOTR notice board, but unfortunately no I didnt know Tolkein - I'm only 22, so he was a few years before me. Actually what I wrote before wasnt strictly true, but was meant as a lead in to what I worte in your guestbook: Tolkein's brother was a classics teacher at my school (Stonyhurst College) way back when, and Tolkein frequently went to stay with him, and it's rumored that he penned most of teh hobbit and probably the LOTR trilogy whilst he was staying with his brother. One of the reasons is that Stonyhurst is in Lancashire, an area of England famous for it's rolling hills, and beautiful countryside. Two points of interest: a) one of the families who donated land to the school years ago (~1650 AD) and is now remembered by havuing a house named after him at the school is Edward (I think, might have been Edmund) Shireburn, which does sound awfully like the "Shire" as found in the LOTR. Secondly, there is a hill close to Stonyhurst called Pendle hill which, legend has it, has witches who live on it. Some think he modified that a little and came up with the dark rider blokies, but that's a little more sceptical in my book.

Back to the graphics front, is there a way I can do an ASP that looks at an images width and height dimensions and set's them for the asp? That way I could run the ASP locally, confident that the image's width and height would be set correctly, without having to go through each image. I realise that you can just leave them out and it does it anyway, but it's a lot tider HTML to do it with the width and height parameters set.

@Beach_BumNov 26.2002 — #there is a plug-in for MS powerpoint 2000 that does exactly what you want (i think). it creates the slide show for you - creates the web pages. it takes any picture - any size and it turns into the display size. i used it once (took me a while to remember this, sorry). it generates asp pages to do it. i looked at the generated code when i used it - but to honest it was way beyond me at the time (maybe still would be). you could download that and take a look (if you have access to a copy of powerpoint 2000).

http://office.microsoft.com/downloads/2000/album.aspx

@jkruer01Nov 27.2002 — #why not just resize the actual image so that it is no bigger than 360 X 360 in Photoshop, Paint Shop Pro, etc. Then you don't have to worry about making it smaller using JavaScript to fit in the table. It seems logical to me...

@telconstar99Dec 01.2002 — #While I don't have an answer, I have an idea that may lead others to an answer.

It sounds like you want this.

If the image width is less than 360, then have set the table to a width of 360.

If the image width is greater than 360, set the width of the image equal to 360.

This is starting to sound like an if/else statement. I haven't written in javascript in awhile, so I dont' know the answer to this. If you could somehow access the image width, then you could do this.

//This may look like c++, I've been writting in that lately.

//Just fit this to work in javascript.

if (document.image.width>='360')

{

document.write('<table><tr><td><img src=variable

width=360></td></tr></table>');

}

else

{

document.write('<table width=360><tr><td><img

src=variable></td></tr></table>');

}

I hope this gives somebody an idea.

Note: I really do hope I read your original message correctly, as I made sure to read it again.

@Klyve1Dec 01.2002 — #If PHP is an option it can be make all images over 360 resize on the fly to 360 width with whatever the relative height is.

@NedalsDec 18.2002 — #Here's a thought. It may be a little over the top and I'm not even sure you can do all I suggest, but here goes....

On the web page, download the images into a hidden div. Then using some Javascript, get the height and width of the hidden image.

If it's greater than your max, set the height and width of a visible dummy image to your max dimensions otherwise set the dummy image to the dimensions of your downloaded image.

Now set the dummy src to your downloaded image.

And that should do it..

UPDATE:

An interesting problem so I thought I'd try it. This works and you can modify it to your needs.

Simply cut and paste this code. Then change the '201.jpg' to any size image and only images over 200 x 200px will be reduced.

<html>

<head>

<title>Untitled</title>

<script language="Javascript">

img = new Image(); img.src = "images/201.jpg";

function setImg() {

w = img.width; h = img.height;

if (h>200) { h=200, w=200 }

document.dummy.width = w;

document.dummy.height = h;

document.dummy.src = img.src;

}

window.onload = setImg;

</script>

</head>

<body bgcolor="#ffffff" topmargin=0 marginheight=0 leftmargin=0 marginwidth=0>

<p align="center">

 <br></br>

<table width=200 height=200 border=1>

<tr><td><img name="dummy" src="images/spacer.gif"></td></tr>

</table>

</p>

</body>

</html>

Good luck!

Success!

Help @jpmoriarty spread the word by sharing this article on Twitter...

Tweet This

Re-sizing images in browser

15 Comments(s) _↴

Success!

Social

Version

Re-sizing images in browser

15 Comments(s) ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴