...

View Full Version : CSS / XHTML Basic Question



zk0
02-05-2007, 03:26 PM
Hi,

Im doing a site with 2 different CSS stylesheets. One for the "screen" and one for "handheld" devices.

Now to the question. I got an image on my site that is bigger than 20KB. I want that image to be replaced with a image that looks the same but is less than 20KB big when the user uses the CSS style for "handheld".

How do I do?

Thanks for any help!

Mhtml
02-05-2007, 04:33 PM
Are you using text/image replacement? OR is this an actual <img/> element?
If it's just text replacement, just specify the different image in the handheld CSS file. If it's an actual <img/> element then you're going to need a bit of javascript.

zk0
02-05-2007, 05:48 PM
Are you using text/image replacement? OR is this an actual <img/> element?
If it's just text replacement, just specify the different image in the handheld CSS file. If it's an actual <img/> element then you're going to need a bit of javascript.

It's a <img/> element!

Mhtml
02-05-2007, 05:53 PM
Alrighty then, I'll move this off to the javascript forum.

_Aerospace_Eng_
02-05-2007, 09:46 PM
Hmm I think it would be better to make it a background image and then just use a different stylesheet with a different media type which will allow you to provide the alternative image. The javascript isn't too reliable because the handheld device might not allow javascript or something.

Mhtml
02-06-2007, 12:42 AM
But just because we can do this doesn't mean we should pretty much deprecate the img element ourselves does it? If the image is too large I assume the device wouldn't try to download it?

_Aerospace_Eng_
02-06-2007, 04:54 AM
Well no we shouldn't deprecate the image element but in some cases like this one I think its better to use the image as a background image. We can't rely on javascript to be enabled. My phone will download any size image as long as the internal memory has space for it.

randomguy83
02-06-2007, 10:57 PM
as AeroSpace indicated, i would simply contain the image in a background.

if it were me, i would hold the image in the background of a div. and using two separate stylesheets one would hold the larger image, the other would hold the smaller image.

neomaximus2k
02-07-2007, 09:52 AM
Hi,

Im doing a site with 2 different CSS stylesheets. One for the "screen" and one for "handheld" devices.

Now to the question. I got an image on my site that is bigger than 20KB. I want that image to be replaced with a image that looks the same but is less than 20KB big when the user uses the CSS style for "handheld".

How do I do?

Thanks for any help!

You can use Javascript to change the image tag's source however this isn't advised as most handheld devices either have javascript disabled or it doesn't operate the same as a PC (mine is prone to memory leaks with JS) so the best thing to do here is to set a <div> up and in the css with a background image, then as others have said with the handheld css file you would set the image as the lower quality image.

There is one thing you say the image is 20Kb, what are the dimensions on the image? if the image already fits on a PDA screen then 20Kb is a little big for that size image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum