Hello all,

I'm having fits trying to resize some images. Here the skinny: I have some images on my server. All of them are gifs and all are 1000x750. I need a good javascript to resize(shrink) the image when my webpage loads. I've tried all the standard html approaches and the image ends up a mess when the page loads.

Now here is the interesting part: if I use the "browser's" zoom feature (it doesn't matter which browser, they all seem to work) and select 75% or 125% the image looks fine..??!!! Ahhhh! help... (please note that the image is a mess before I select the browser's zoom feature. So it must refresh the image from the server when it zooms..?)

So... I think what I need is a script that will tell the browser to "auto" zoom to a specified percentage. I've already tried a few scripts that just resize and they don't work, so I think using the internal zoom feature for the users default browser is my best bet. Any thoughts..? plz...???

nothing to do with your problem but I love that avatar....

Riffster, maybe this is what you're looking for: http://www.coffeecup.com/pixconverter/

Yeah, I caught my cat listening to my Ipod one day and took a picture. Nobody would have believed it, haha...

No, but thanks... I actually own all of your software (bought the webmaster pack, very happy so far btw), but what I need for this project is for the html or js to tell the browser how to do the image conversion(reduction)...

Here the deal: I have several programs that generate images. They send the images to a folder on my server, then html pages allow my clients to open the images that are sitting on my server. The images hit my server as gifs (1000x750). If I display them at 1000x750 they look great. If I try to use the html to resize them at all, they are a mess.(they are stock charts, so I need them to stay "neat") On some of the pages I would like to group 4 of them together, but I need to be able to reduce their size(width and height to about 500x375) for them to fit on the page. So... based on what I now know, I need the html to do one of 2 things with the images:

1. Tell the brower to open the page using it's internal zoom feature(50%). Just resize the entire page by half basically.

2. Find a js that performs the same function for just the images. It will probably use CSS or something... not sure...

I think option 1 is the best. I just have no idea how to do it..? help me plz... I'm lost in a sea of my own ignorance... lol...

Riffster,

The HTML code to set the size of an image is placed in the image tag. It would look something like this:

<img src="myphoto.bmp" width="480" height="360" title="Photo of me" alt="Photo of me in a suit">

The width and height are the settings that set the size of the viewed image. It is critical that you keep the same ratio as the original image. You said your images are all 1000x750, so to reduce them you could use something like 100x75 or 400x300, and it may be that with any reduction this way, you will see some distortion of the text.

Have you looked at other methods of displaying the data? The reason I ask is if you look at the size of the 1000x750 GIF files, you will see that they are much larger than a 100x75 GIF. On my site, I have taken photos (jpg)that are about 2500x1900 (700KB) and resized them to 460x360 (130KB). The difference between 700 KB and 130 KB results in over 5 times difference in loading the photo. Many folks will give up if it takes too long to load a web page.

Hope this helps.

Hello billr,

Yeah, that was the first html that I tried and several variations, but they don't display the image correctly. Too messy to be useful. That's why I need to use the zoom feature that I described. Any idea how to do that? thanks...

Riffster,

The only thing I can think of is to have a link to the gif. Maybe something like: <a href="image20070204.gif">Monday's statistics</a>

That should give the words "Monday's statistics" underlined as a link, and clicking on it will take you to the image using the browser. You can create a header that says STATISTICS, and just have Monday as the link, and Tuesday in the next link.


See if something like that will work for you.

How will that help me resize the image? I understand your example, but I'm trying to "squash" an image into a small window. Kinda like a med size thumbnail, but it has to be readable. That's why I still think the browsers zoom feature is my best option. I just don't know how to use js to perform that function... Any thoughts..? thanks for all the input...

Riffster,

What I posted is a way to view the images from a type of menu. I don't really know what you are doing, but it seemed that you would be getting GIF files regularly, and need to add them to a list that others can click to view the GIF using their browser. That will allow them to use the browser zoom feature.

The only way I can explain it differently would be to use your actual files and GIFs.

If you take the example I gave, and put it on a page, you will have a large word STATISTICS. If you need another header, just replace that word with something that fits your situation. The next two lines give examples of a way to get the browser to view an image. The only problem is the folks viewing the images will need to use the browser back button to return to the menu.

I just had an idea, and will create some gif files, and try this out.