/    Sign up×
Community /Pin to ProfileBookmark

Change image depending on resolution

Copy linkTweet thisAlerts:
Aug 09.2004

gday folks.

i have a web-site for my cricket club at [url]www.eastscricket.com.au[/url]

i’m doing a bit of a redesign (mainly just the header graphic of the page).

the problem i have with the new header is:
– on 800×600 res, it looks perfect how i want it
– on 1024×800 res, it looks a little dodgy, although it doesn’t look COMPLETELY terrible.

i have an image that makes it look proper on 800×600, and i have an image that makes it look right on 1024×800. On larger resolutions, the second image doesn’t look perfect, but it looks decent enough and i’m not that bothered to fix it up.

i have been getting some help, but nothing seems to work.

the current HTML i am running is as follows:
—————————————–

<html>
<head>

<SCRIPT language=”JavaScript”>
function loadPic()
{
if (screen.width=<800)
{
document.getElementById(“image”).src=”icons/headers/01bottomlow.jpg”;
}
else
{
document.getElementById(“image”).src=”icons/headers/01bottomhigh.jpg”;
}
}
</SCRIPT>

<title>blah blah</title>
</head>

<BODY onLoad=”loadPic()”>

<IMG id=”image”>

</body>

</html>
—————————————–

Obviousbly, there is other code around that, but that is everything i have on the page to do with the image i want changed.

if anyone can help, it would be GREATLY appreciated.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Black_ThunderauthorAug 09.2004 — anyone??

hate to post twice on my first post here, but am getting really desperate for this.

i presume it is possible, but if not that would also be good if someone could tell me. I'd rather just know it's not possible than pull my hair out trying to figure it out.
Copy linkTweet thisAlerts:
@AdamGundryAug 11.2004 — Try this:
&lt;script type="text/javascript"&gt;
function loadPic(){
if (screen.width &gt; 800){
document.getElementById("image").src="icons/headers/01bottomhigh.jpg";
}
}
&lt;/script&gt;

...

&lt;body onLoad="loadPic()"&gt;

&lt;img id="image" src="icons/headers/01bottomlow.jpg" alt="..."&gt;

Adam
×

Success!

Help @Black_Thunder spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...