PDA

Click to See Complete Forum and Search --> : Auto resizing image based on viewers screen resolution?

GamerBlake
06-10-2003, 07:32 AM
Making up a logo for my new site in gif format. It'll fill the top part of the screen in 800x600, but I want it to auto resize to fill screens on higher resolutions depending on the visitors res.

Can this be done with JavaScript?

Any help appreciated thanks.
pyro
06-10-2003, 07:39 AM
Odds are, you image won't look all that great once it get's streached, but here's how:

<script type="text/javascript">
function resizeImage() {
if (screen.width == 800) {
document.images["logo"].style.width = "800px";
}
else if (screen.width == 1024) {
document.images["logo"].style.width = "1024px";
}
/*You can add more here*/
else {
document.images["logo"].style.width = "1200px";
}
}
</script>

</head>

<body onload="resizeImage();">
<img src="logo.gif" name="logo">
GamerBlake
06-10-2003, 08:50 AM
Thanks :)

Originally posted by pyro
[B]Odds are, you image won't look all that great once it get's streached,

Well I'll actually be using a logo made for the highest res and shrinking it down for the smaller screens (assuming I can do that with this script?)

Would there happen to be a script that will allow me to load a completely different sized version of the logo perchance? (for diffrent screen resolutions of course).
pyro
06-10-2003, 10:24 AM
Yes, that is actually the best way to do it. Try this:

<script type="text/javascript">
function resizeImage() {
if (screen.width == 800) {
document.images["logo"].src = "yoursmall.gif";
}
else if (screen.width == 1024) {
document.images["logo"].src = yourmedium.gif";
}
/*You can add more here*/
else {
document.images["logo"].src = "yourlarge.gif";
}
}
</script>

</head>

<body onload="resizeImage();">
<img src="logo.gif" name="logo">
GamerBlake
06-10-2003, 11:14 AM
Thanks alot. I like these forums.. :)
pyro
06-10-2003, 11:20 AM
You bet... Glad you do... :D
GamerBlake
06-11-2003, 09:42 PM
Hmm, I'm having trouble getting the different logo script to work. I've got it below with what I think I need to change, er, changed... ;)


<script type="text/javascript">
function resizeImage() {
if (screen.width == 800) {
document.images["logo"].src = "http://www.myserver.com/urnnlogo1.gif";
}
else if (screen.width == 1024) {
document.images["logo"].src = "http://www.myserver.com/urnnlogo2.gif";
}
/*You can add more here*/
else {
document.images["logo"].src = "http://www.myserver.com/urnnlogo3.gif";
}
}
</script>


I'm assuming the above is correct? Not missing anything am I?

I think I might be going wrong with the below code:


</head>

<body onload="resizeImage();">
<img src="logo.gif" name="logo"> [/B]

What do I actually link the source too, seeing as I don't actually have a "Logo.gif", and do I need to keep the "name" command in there?
GamerBlake
06-15-2003, 06:23 PM
Just wondering if anyone can help me out with the above problem please?
pyro
06-15-2003, 06:34 PM
Make sure you point your image tag to an actual image. I would point it to the 800x600 one, as that is currently the most popular screen res. It is a good idea to do this anyway, as some 13% do not have javascript enabled...

<img src="http://www.myserver.com/urnnlogo1.gif" name="logo">
GamerBlake
06-16-2003, 04:26 AM
Will this script work off line, because I'm buggered if I can get it to work on my pc.
pyro
06-16-2003, 07:32 AM
Yep, it works fine... Try this:
GamerBlake
06-17-2003, 12:49 AM
Ahh, I think I had some redundant code in there or something, I've got it working now, thanks.

You're my own personal Jesus Christ.. ;)
pyro
06-17-2003, 07:02 AM
Originally posted by GamerBlake
You're my own personal Jesus Christ.. ;) I hope not...