Show/hide an image works only on IE

Question

Hi, I have that JavaScript code:

  var state = 'hidden';
    function Show_Picture() 
    {
        if (state == 'visible') 
            state = 'hidden';
        else 
            state = 'visible';
        document.getElementById('loader').style.visibility = state;
    }

'loader' is the

<img alt="" id="loader" src="file:///D:/ajax-loader.gif"/>

Why that code doesn't work on FF ? Ont the IE it works OK.

Here's the code: http://pastebin.com/m38aa1847

Answer 1

Use a framework. They take care of all this cross-browser business for you.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"&gt;&lt;/script&gt;

<script>
function Show_Picture() {
    $('loader').toggle()
}
</script>

Answer 2

Try this instead:

var state = 'hidden';

function Show_Picture() 

{

    if (state == '') 

        state = 'hidden';

    else 

        state = '';

    document.getElementById('loader').style.visibility = state;

}

Answer 3

I actually can't reproduce your bug. I copy-pasted your code from pastebin and ran it on FF 3.5.6 - the only thing I changed was the image source to a local image of my own.

Are you trying to debug it on FF at all? Try running it with Firebug open and see if any errors are reported.

Test the response code of the image request, too. Perhaps it's the file:// protocol that isn't working correctly.

EDIT

Yup - just tested it. When I changed the image's src to a fully-qualified local path (i.e., one with file://) it doesn't show up in Firefox. Your Javascript works fine - just change the image path.