When there is no Javascript turned on. What other solution?

Question

I am working on a website. I have an image that I set to display: none in CSS. I used JavaScript to display it and slide it in after page has finished loading. It's working perfectly.

I want to launch the website, with JS disabled and see what will happen. I reloaded the web page, and the image didn't show at all. This is normal since it has been set to display: none in CSS.

Here is my question: What is the solution to this? I want a situation whereby a user will still see the image even when JS is disabled in his browser. I don't want the image to slide in at this point, but I want it just to load and show like any other thing on the webpage.

Answer 1

You could detect whether JS is enabled (a few things come to mind like Modernizr, or simple <noscript> tags would probably do the trick... then add some additional CSS to show it again. It's only a quick and dirty answer, but it should do the trick:

<noscript>
    <style type="text/css">
        #yourimage { display: block; }
    </style>
</noscript>