'interesting img display trick' problem

[mongoloid001]

Hi, basically what I want is to find out whether the localhost is running or not(note the onerror event). In terms of display the image shouldn't take up any space in the layout, however, the problem is I can still see a small dot in displayed and the element took up about 10px more in height. The code is below, I wonder how I can achieve the nothingness effect with CSS.

<img src="https://localhost:8443/images/con_test.jpg" width="0" hight="0" onerror="alert('no');" >

Good:
¦+++++++++¦
¦ ¦
¦ ¦
¦ ¦
¦ ¦
¦+++++++++¦

Bad:

¦+++++++++¦
¦ ¦
¦ ¦
¦ . ¦
¦ ¦
¦ ¦
¦+++++++++¦

Thanks!

[pageoneresults]

Typo in the attributes...

width="0" hight="0"

Should be width="0" height="0". You may also want to run your page through a validator to see if there are any other typo issues present before attempting to figure out the problem. Most of us will usually recommend that you validate your HTML/XHTML and CSS before we can do a process of elimination and determine where the possible problem is.

[mongoloid001]

oh yeah, just found out:). But I could still see the dot in the center. I guess I have to make a image that's the same as the background.

Thanks!

[broniusm]

Cool beans mongoloid!
I didn't know that a "broken image" throws an error. I also didn't know that onerror handlers worked at the object level from html.

Thanks for the tip!

[DrDoc]

An image can never be smaller than 1×1 pixel, even if you set it to less. Add CSS to it:
visibility: hidden;

If you use display:none some browsers will not even render it.

[DrDoc]

I guess I have to make a image that's the same as the background.

If the image doesn't load, you'll still see a dot ;)

[mongoloid001]

Oh, if this image doesn't load, I replace the whole div with

 div.innerHTML = "Server is down, blah, ..."

Kind of cool, not sure if innerHTML is a good idea though.

[DrDoc]

innerHTML is a good idea, but only if you know that all your visitors use a browser that supports this javascript function. Personally, I would use CSS instead. Let the JavaScript hide/show a div with the text notifying the user about the server being down.

Better yet, ensure that your server never is down ;)