Alright, here's the deal. I've designed an entire website for work, but there are complaints about certain things not being seen on low resoultions. I opted to have a link to show the user how to change their resolution, but my superiors really want the content of the website to resize relative to the resolution/browser window.

The way I have the site set up, in a nutshell, is that on the majority of the pages, the body is designed as one big image, sandwhiched between the header and the footer, in a table. Is there a way to set the large image that has text, etc. to resize itself depending on the browser window size?

Basically the answer is no, an image will not resize (though the svg file format is intended to do this it is pretty much unsupported by browsers at the moment). There are methods to have your site detect browser resolution and then send an appropriatly sized file, e.g. you need multiple versions of the page. But its complicated and a pain in the arse and is rarely done for that reason. If it was straightforward you'd probably see resizing images all over the web.

Now now john lets not ruin it for our friend. There's a work around for this, but this would mean that you would have to create different picture according to the size of the screen, then use javascript, to display those images. If you're ready to do it then i'll send the code over and you can play around with resizing the images.

Edited by - roders22 on 08 Aug 2006 15:52:00

Roddy--

You have my attention and I'm interested to hear more.

this is the code.
<pre id=code><font face=courier size=2 id=code>
&lt;script language="JavaScript"&gt;
&lt;!-- Hide this script from old browsers --
if ((screen.width == 800) && (screen.height == 600))
{
document.write('&lt;img src=../images/resize.jpg&gt;')
document.write('&lt;br&gt;')
}
else if((screen.width == 1024) && (screen.height == 768))
{
document.write('&lt;img src=pic1.jpg&gt;')
document.write('&lt;br&gt;')
}
else if((screen.width == 1152) && (screen.height == 864))
{
document.write('&lt;img src=pic1.jpg&gt;')
document.write('&lt;br&gt;')
}
else if((screen.width == 1280) && (screen.height == 768))
{
document.write('&lt;img src=pic1.jpg&gt;')
document.write('&lt;br&gt;')
}
else if((screen.width == 1280) && (screen.height == 1024))
{
document.write('&lt;img src=../images/resize.gif&gt;')
document.write('&lt;br&gt;')
}
// -- End Hiding Here --&gt;
&lt;/script&gt;
</font id=code></pre id=code>
Just create different image at different screen resolution to make it fit then. The put the code above where you want the image to be displayed. and within the document.write(&lt;'img src= change it to the path of the image according to the screen size.

Edited by - roders22 on 08 Aug 2006 17:29:42

Could you give me a variation of the code where it's 800x600 vs Anything else. What I currently have in the site is good for all resoultions above 800x600. I want the image to change only if it's read to be 800x600.

And for the sake of making the code a bit clearer, lets assume the regular image is careers.htm and the image for 800x600 is careers2.htm, just so I can see where they would go. Thank you.

Also, the end of your post is a bit confusing where you say what to put in the place of the image itself code-wise.

Edited by - AlloyNES on 08 Aug 2006 18:10:45

What do you mean different variation of code? The code basically checks the screen resolution where the matching resolution is found it will execute the script and display the image not the html page. So what you have to do here is take you're original image change your screen resolution to 800x600, and resize according to the resolution. Then the same image again this time change your resolution to 1 up and resize again you do that for the most common resolution i.e. 15" screen 800*600, 17" screen 1024x768 and 19" 1280x1024 (note as well that we have 19" wide screen am not sure for the resolution of this 1. Then you so for each resolution you create a new image save it in a folder, then in the code i've given you, just call the image, so in the script where it says
document.write('&lt;img src=here you put the image path&gt;') e.g. document.write('&lt;img src=images/screen.jpg&gt;')

<pre id=code><font face=courier size=2 id=code>
&lt;script language="JavaScript"&gt;
&lt;!-- Hide this script from old browsers --
if ((screen.width == 800) && (screen.height == 600))
{
document.write('&lt;img src=&gt;')
document.write('&lt;br&gt;')
}
else if((screen.width == 1024) && (screen.height == 768))
{
document.write('&lt;img src=&gt;')
document.write('&lt;br&gt;')
}

else if((screen.width == 1280) && (screen.height == 1024))
{
document.write('&lt;img src=.&gt;')
document.write('&lt;br&gt;')
}
// -- End Hiding Here --&gt;
&lt;/script&gt;
</font id=code></pre id=code>

Friends, it depends on how he has chosen to do the design, You can simply create an image in MM Fireworks. Design the site using 760*560 then slice it up ensure the slices are many the export to html and you can create some as background please read help in fireworks for details you can see what I did on www.choicesouls.org I used fireworks for it, that may answer your question


Urmy

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
What do you mean different variation of code? The code basically checks the screen resolution where the matching resolution is found it will execute the script and display the image not the html page. So what you have to do here is take you're original image change your screen resolution to 800x600, and resize according to the resolution. Then the same image again this time change your resolution to 1 up and resize again you do that for the most common resolution i.e. 15" screen 800*600, 17" screen 1024x768 and 19" 1280x1024 (note as well that we have 19" wide screen am not sure for the resolution of this 1. Then you so for each resolution you create a new image save it in a folder, then in the code i've given you, just call the image, so in the script where it says
document.write('&lt;img src=here you put the image path&gt;') e.g. document.write('&lt;img src=images/screen.jpg&gt;')

<pre id=code><font face=courier size=2 id=code>
&lt;script language="JavaScript"&gt;
&lt;!-- Hide this script from old browsers --
if ((screen.width == 800) && (screen.height == 600))
{
document.write('&lt;img src=&gt;')
document.write('&lt;br&gt;')
}
else if((screen.width == 1024) && (screen.height == 768))
{
document.write('&lt;img src=&gt;')
document.write('&lt;br&gt;')
}

else if((screen.width == 1280) && (screen.height == 1024))
{
document.write('&lt;img src=.&gt;')
document.write('&lt;br&gt;')
}
// -- End Hiding Here --&gt;
&lt;/script&gt;
</font id=code></pre id=code>
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

I put the script in, and deleted the Hidden parts so it would function. I put in the same image name/location for each resolution just to see if anything would show up on the preview. For some reason, there is nothing showing up.

Is there something else I need in there to make the image show up?

&lt;td width="152" height="20"&gt;&lt;div align="center"&gt;&lt;img src="images/index_15c.gif" width="150" height="20"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&lt;img src="images/index_15.gif" width="93" height="20" alt=""&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td colspan="12" valign="top"&gt;&lt;div align="center"&gt;
&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;div align="left"&gt;&lt;img src="images/careerTitle.gif" width="530" height="57"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;div align="left"&gt;
&lt;p&gt;&lt;script language="JavaScript"&gt;&lt;if ((screen.width == 800) && (screen.height == 600)){ document.write('&lt;img src=images/career.jpg&gt;') document.write('&lt;br&gt;')}else if((screen.width == 1024) && (screen.height == 768)){ document.write('&lt;img src=images/career.jpg&gt;') document.write('&lt;br&gt;')}else if((screen.width == 1280) && (screen.height == 1024)){ document.write('&lt;img src=images/career.jpg&gt;') document.write('&lt;br&gt;')}&lt;/script&gt;&lt;/p&gt;
&lt;p&gt;&lt;br&gt;

Edited by - AlloyNES on 08 Aug 2006 19:13:57

No just take it as it is and put it there.

Still not working. Here's a pic of the code:

<img src="i44.photobucket.com/albums/f34/AlloyNES/code.gif" border=0>

And a pic of the design.

<img src="i44.photobucket.com/albums/f34/AlloyNES/design.gif" border=0>

Ok lets go step by step
first create different sizes of the picture for different screen resolution.
second put the code that i gave you in your html page where you want it to be displayed.
third withing the code document.write('&lt;img src=yourimage.jpg&gt;') change the yourimage.jpg bit to the path and the image name. Make sure that the picture size suits the resolution in the script. for e.g. if img1 is for resolution screen 800x600 then it goes in the first part and so on.

I followed your instructions, but to no different result.

The code:
<img src="i44.photobucket.com/albums/f34/AlloyNES/code2.gif" border=0>

The dreamweaver design view:
<img src="i44.photobucket.com/albums/f34/AlloyNES/design2.gif" border=0>

In the browser:
<img src="i44.photobucket.com/albums/f34/AlloyNES/final2.gif" border=0>

try changing your screen resolution and check it.

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
try changing your screen resolution and check it.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

Tried it at 800x600. Still shows no image at all. What am I doing wrong?

Does javascript not work in previews? Is there other code that needs to be added or removed in order to make it work?