Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS / XHTML Basic Question

    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!

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.
    Omnis mico antequam dominus Spookster!

  • #3
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mhtml View Post
    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!

  • #4
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Alrighty then, I'll move this off to the javascript forum.
    Omnis mico antequam dominus Spookster!

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?
    Omnis mico antequam dominus Spookster!

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by zk0 View Post
    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.
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •