Changing image sizes

**Matt Jacob** · Nov 13, 2000, 10:40

How do you make the image show more of it when you resize the page? Like i want people on 800x600 to see the image, but then when you goto 1024x786, i want them to be able to see additional parts of the image.

so how do you make it so that the image resizes when you make the window size bigger?

thanks

**aspen** · Nov 13, 2000, 10:49

You'd need to use javascript to do this, as such this question would be best answered in the client side scripting category.

**creole** · Nov 13, 2000, 11:59

aspen...all you would need to do to achieve this effect is to make the image larger to begin with...

Matt...a good way to accomplish this would be to start with a larger image...make it a background so that you don't get scrollbars horizontally...

then when your user comes to the page at 800x600, they get a portion of the image...if they come there with a larger resolution, they get more of the image.

**Matt Jacob** · Nov 13, 2000, 13:00

would it work if i make the image as the background of a cell? here's my example of what i need to do: i want the banner at the top of my page to expand. so i'm thinkin that making the image the bk of a cell would probably do it...

**creole** · Nov 13, 2000, 13:47

Matt...all that would do is to tile that image in the cell when the cell expands...plus not all browsers support using an image as a cell or table background.

It would help us if you could give us an exact example of what you are wanting to accomplish.

**Matt Jacob** · Nov 13, 2000, 21:34

alright, i'll have to try that. thanks for the help.

**aspen** · Nov 13, 2000, 22:18

oh... I thought you wanted to dynamically change the size of the image depending on the users resolution.

**Fluffykins** · Nov 14, 2000, 03:05

I've found a script that might do exactly what you're after!

I was orignally looking for a script that redirects the user to a page containing an appropriately sized image based on their resolution but this may prove better:

Code:

<!-- ONE STEP TO INSTALL RESOLUTION IMAGE:

  1.  Copy the coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the BODY of your HTML document  -->

<BODY>

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original:  Daniel Farmer (danfarmer@hotmail.com) -->
<!-- Web Site:  http://www.mp3.com/protoculture -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
if (screen.height >= 768 && screen.width >= 1024) {
document.write("<img src='http://your-web-site-address-here.com/image.gif' width=850 height=11 border=0>");
}
else {
if (screen.height == 600 && screen.width == 800) {
document.write("<img src='http://your-web-site-address-here.com/image.gif' width=600 height=11 border=0>");
}
else {
document.write("<img src='http://your-web-site-address-here.com/image.gif' width=475 height=11 border=0>");
   }
}
//  End -->
</script>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  0.96 KB -->

I got this from http://javascript.internet.com/user-...ion-image.html - what it does is alter the image's height and width attributes based on the client's resolution. It does only work on version 4.0+ browsers though.

If you're after a script to redirect based on resolution, JavaScript source is also a good place to start.

Hope that helps

Not bad for 0903 and only two cups of coffee eh?

Ady

**Matt Jacob** · Nov 14, 2000, 10:07

that's exactly what i was looking for!!! thanks a mil!

**creole** · Nov 14, 2000, 10:08

good job Ady

**Fluffykins** · Nov 14, 2000, 10:09

Glad to be of help

Ady

The SitePoint Forums have moved.

User Tag List

Thread: Changing image sizes

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions