PDA

View Full Version : Image replacement based on resolution.

quietstorm
10-07-2004, 02:41 AM
Howdy...some of you might remember me from a few years ago, around here, but probably not. Anyway, it's been a while -- since I've been here, since I've dealt with Javascript, and since I've done much with web design in general.

I'm working on redesigning a website at the moment, though, and, due to the nature of the website (selling bath/body products), there will likely be a significant amount of viewers running lower reslutions (800x600 and lower). So, rather than having things display as overly big on 800x600 or as overly small on 1024x768 (or higher), I'm wanting to load a separate set of images for lower resolutions.



function checkRes() {
....if (screen.width >= 1024) {
........document.logo.src = "pics/logo.png";
........}
....else {
........document.logo.src = "pics/logo800.png";
........}
}


I know I can use something to that effect, and add a separate statement for each image I use, but that seems like it could get awfully tedious. Besides, it would mean more of a hassle when I change things, and more possibility for error. If I keep naming files with the same format (a standard object-oriented naming convention -- images being used as buttons are being saved as btn<Name>), I think I could eliminate a lot of the meaningless code by using something like the document.getElementById() method, which is what I'm using for rollovers.

However, from my limited/rusty knowledge of Javascript, I'm not sure how to do that. Obviously, I can't do it the same was as I'd do my rollovers -- that would mean onLoad="FunctionName('argument')" to each image, which would be pointless, since the images would all have to load before they change their source (besides, it creates a stack overflow ;)).

So, who wants to help? :D (That's always been my favorite Smilie.)
coothead
10-07-2004, 10:33 AM
Hi there quietstorm :D

with this simple script you use one image and just change the width :D
In this working example I have used two images with the ids and widths
set in arrays, obviously, you can have as many images as you want :D
<html>
<head>
<title>change image width</title>
<base href="http://coothead.homestead.com/files/">

<script type="text/javascript">
<!--

var screen_height = screen.height;

var id=new Array();
id[0]="foo";
id[1]="blah"

var width=new Array();
width[0]=400;
width[1] =200;


function sniffer() {

for(i=0;i<id.length;i++) {
if(screen_height <600) {
changeImageWidth(id[i], width[i]*0.75+"px");
}
else if (screen_height == 600) {
changeImageWidth(id[i], width[i]+"px");
}
else if (screen_height == 768) {
changeImageWidth(id[i], width[i]*1.3+"px");
}
else if (screen_height ==1024) {
changeImageWidth(id[i], width[i]*1.7+"px");
}
}
}

function changeImageWidth(i,w) {
document.getElementById(i).style.width=w;
}

onload=sniffer;

//-->
</script>

</head>
<body>

<div><img id="foo" src="dog.jpg" alt="weird dog" /></div>

<div><img id="blah" src="aaa.jpg" alt="aaa" /></div>

</body>
</html>