SitePoint Sponsor

User Tag List

Results 1 to 25 of 45

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    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.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <html lang="en">
    <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;}
    <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>
    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.


    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.)


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


Posting Permissions

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