SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 45
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 29 (image replacement)

    CSS - Test Your CSS Skills Number 29 : Quiz now ended - Solution posted in post #36

    Quiz 29:

    This quiz is from an idea by Erik J and is your chance to have a go at a new and improved image replacement technique that will work with transparent images.

    Although as I always point out "this is just a quiz for fun" so please leave the semantics aside and just get on with the task

    Using the html provided below you must replace the heading text with a transparent image.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Transparent Image Replacement</title>
    <style type="text/css">
    body{    background:url(gradient.gif) repeat-x 0 0;}
    </style>
    </head>
    <body>
    <h1>Transparent Image Replacement</h1>
    <h2 id="replaced"><a href="#">Replaced Heading</a></h2>
    <p>Replace the heading with one of the attached transparent gif images. The images display 
        area is 360x50 px with horizontal or vertical sprites. The replacing image must show the 
        body background under but the replaced heading can't show at all when css is on.</p>
    <p>The replacing must work in all major browsers. The only change allowed in the html is to 
        add <strong>one</strong> element. The css is up to you.</p>
    <p>As a bonus object you can add switching the sprites in the image on hover. The replacing 
        takes place in an anchor only to make IE6 support a hover effect.</p>
    </body>
    </html>
    The rules are that you can only add one element to the html (and that can be any element you like) but you cannot change the html in any other way (neither can you remove elements from the html). You can of course add as much CSS in the head as you need.

    The task is to replace the text content with the transparent image in such a manner that in any version of images on/off and/or CSS on/off then the correct content is still displayed reasonably well.

    Take a look at the attached image called screenshot-transp.gif which shows a screenshot of every scenario. You must try and achieve this type of effect as best you can. What mustn't happen is that text and images are displayed together or that nothing is displayed at all.

    Remember that because the image is transparent the usual method of placing the image on top of the text will not work. There are a couple of ways to do this and even though they may not be semantically correct you will need to do whatever you have to to achieve the result.

    The resulting code should still be valid though and work in Firefox 3 without using CSS3. (If you can get it to work in Ie6 that will be a bonus)

    No scripting and no expressions as usual.

    (Erik has also provided some instructions in the html above.)

    One last important point to note is that the body background could be any color or indeed a picture of some sort so you must be able to see the body background behind the transparent image (I have attached a gradient gif image for you to test with).

    This quiz is more of a puzzle type quiz than the previous quizzes so you may need to be inventive and have some tricks up your sleeve.

    There are two transparent image attached to this post that you can use for the heading (use either one or the other - it doesn't matter which as one is horizontal and one is vertical) and there is also a gradient image for the body background as already mentioned.

    As usual please don't mention the answer in the thread but PM me your answers and we will announce the winner in due course.

    Remember this is just for fun.

    Edit:



    Ok as there is some confusion - I going to simplify the rules and you only need to make this work in Firefox (which is where the screenshots were taken from ).

    Use the webdev toolbar and you can turn css off for testing or use the "hide images" option or any combination of both. To test broken pathnames just corrupt all the image pathnames.

    Refer to the screenshot and match each scenario but note that picture 6 should say:

    "CSS on and all images missing (all broken paths)"

    Remember this is a puzzle/trick so don't get too hung up on semantics.

    As to questions as whether this has been done before then the answer is no because ultimately the methods all fail in one of the scenarios shown in the screenshot.


    (If you can't satisfy all the requirements but have most options covered and you think the method is better than others then send it to me anyway.)




    Paul

    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    whaat? already??
    im completely unprepared (plus its very late)

    ill look into it tomorrow

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    No need to rush - the quiz will be up for a while

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,580
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Seems like a confusing quiz more of anything..didn't someone already invent this? I won't give the individuals name so people don't cheat but..just wondering.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Seems like a confusing quiz more of anything..didn't someone already invent this? I won't give the individuals name so people don't cheat but..just wondering.
    In the first sentence in this quiz Paul gave a link to nine more image replacement techniques.
    Happy ADD/ADHD with Asperger's

  6. #6
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i see two different types of solutions here

    one is where if something is OFF (images or CSS) then text shows
    the other where images still show unless both of the above are off.

    personally i think if a person has css off its better to show plain text instead of an image standing out in the middle of a unstyled page.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm a little confuzled about the broken images scenario. My browser never notifies me that there are no images, but I think every other browser puts some ugly icon if it thinks there should be an image and it just can't get it (for any reason, including 403 Forbidden). Is this quiz solution supposed to "fool" those browsers who make ugly icons if the image is broken/403 and everything else is on?


    My browser (and maybe a few others) shows neither an icon, a border, nor does it even reserve rendering space for missing images (for any reason, whether turned off in the browser or 403 or whatever). The lack of reserved space is nice but I've seen sites where text is jumbled on top of itself because the author relied on the posted height and width of an image to separate positioned text.

    In any case I already have an idea for the other scenarios, because I think I've used it. I'll have to give thanks in advance to Gary because I think once, a long time ago on another forum, he mentioned the technique (which was always way more work than the other image replacement scenarios lawlz but maybe here it has its place : )

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ok as there is some confusion - I going to simplify the rules and you only need to make this work in Firefox (which is where the screenshots were taken from).

    Use the webdev toolbar and you can turn css off for testing or "hide images" or any combination of both. To test broken pathnames just corrupt the image pathname.

    Refer to the screenshot and match each scenario.

    Remember this is a puzzle/trick so don't get too hung up on semantics.

    As to questions as whether this has been done before then the answer is no because ultimately the methods all fail in one of the scenarios shown in the screenshot.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yurikolovsky is on the right track with his first submission (although he didn't realise it)

  10. #10
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i have solved it, tidying up now

    edit:
    damn damn damn, last second difficulties

  11. #11
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    how to disable images?

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky
    how to disable images?
    In Firefox, Tools ==> Options ==> Content ==> Load Images Automatically OR you could use the Web Developer Toolbar.

    Did you solve it for just Firefox or for other browsers too?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @Kravvitz

    that does not work with local images for me for some reason.

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, it turns out I gotta make the image paths broken anyway...
    Yeah Yuri that's FF for you, to disable local images I had to manually break paths anyway.
    I have something funny going on in Chrome (that should not be allowed), and the other browsers are doing some other things I'm not happy with, but I suppose I could send in a half-working version. I like the ideas in it.

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    well i have sent my working in firefox submission, i have no idea how to handle IE.

  16. #16
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky
    @Kravvitz

    that does not work with local images for me for some reason.
    You have to load the page from localhost to not load images in FF.

    But a broken path could simulate images off I think.
    Happy ADD/ADHD with Asperger's

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Kravvittz and Yurikolvsky have been given me acceptable submissions so well done to both.

    To others trying this I should point out that in the screenshot for picture 6 it should say:

    "CSS on and all images missing (all broken paths)"

  18. #18
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Erik J View Post
    You have to load the page from localhost to not load images in FF.

    But a broken path could simulate images off I think.
    not completely, because the disabled images mean that the whole image tag is missing, which might not act alike in some conditions.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have an entry from Stomme Poes that nearly qualifies so well done and thanks for trying.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Another Update to Rules

    This is too awkward for me to test in multiple browsers so just keep your sumbissions for Firefox for now.
    We can discuss other browsers and other issues afterwards

  21. #21
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    not completely, because the disabled images mean that the whole image tag is missing, which might not act alike in some conditions.
    Timo, yes it is good to be cautious. Anyway you can always comment out any image tag.
    Happy ADD/ADHD with Asperger's

  22. #22
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    example

    <img width="100" height="100"> (you can add the dimensions with css too)
    it moved text but if i break its path then it will continue to move the text which is not the same as commenting out the whole image

    also i noticed that firefox view/page style>no style is not the same as the web developer toolbar "CSS>no styles"

    because firefox takes the img attributes (height/width) as styles, while the web toolbar does not consider them to be styles.

    same thing happens with disabling images, some devices might disable the source only leaving the whitespace, which might be very desirable, as websites often break when the image tag is completely missing, or removing it completely (google handles this by having a <div>with a background instead of a <img>)
    there are more variations like this.

    you can quickly see that if one browser can have so many variations, just think about all the browsers and their variations.

    just to clarify some more.
    Last edited by Paul O'B; Oct 15, 2009 at 08:51. Reason: spoiler tags added

  23. #23
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the details.

    I don't want a technical discussion that could lead the solver in any direction. Whether it would be useful or not, any lead could cause someone missing a possible new solution of his/her own.
    Happy ADD/ADHD with Asperger's

  24. #24
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I don't want a technical discussion that could lead the solver in any direction. Whether it would be useful or not, any lead could cause someone missing a possible new solution of his/her own.
    yes, granted, i will become a silent observer then. (try to at least)

    my post had nothing to do with any leads, and does not contain any spoiler info, i mean when i wrote it i was talking about images in general, as in general talk not related to the quiz, but related to what happens when you disable images.

    p.s. its the html in it that makes it look so spoilerish.

  25. #25
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand correctly how to do this, I think it's possible without adding any elements to the HTML.
    Simon Pieters


Bookmarks

Posting Permissions

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