Hide Image until mouseover?

[Emo]

Is this possible to do? I tried almost everything I could think of but I can't make it so when the page loads a specific picture doesnt show until I move my mouse over it...

any help would be appreciated!
-Emo

[punkpie_uk]

Try putting it inside a layer. I'd use this code to acheive it

<div style="position:absolute; left:20px; top:50px; width:100px; height:100px;" onmouseover="document.getElementById('image1').style.visibility='visible'">
  <img id="image1" name="image1" src="image1.jpg" style="visibility:hidden;">
</div>

[Rick Bull]

And I think also you can use display rather than visiblity:

<div style="position:absolute; left:20px; top:50px; width:100px; height:100px;" onmouseover="document.getElementById('image1').style.display='block'">
  <img id="image1" name="image1" src="image1.jpg" style="display:none;">
</div>

You can also use "inline" rather than "block" if you want the image to stay in the "flow" of the rest of the document.

[punkpie_uk]

You can also use "inline" rather than "block"

Yeah, but by default Div is set to block as it is a Block Element. If using inline wouldn't it be better to use Span?

[Rick Bull]

Dunno You're probably right, I've never tested it before

[CiberTHuG]

I could be wrong about this, but, if you use "display: none", then how will you me able to mouse over it? I sugest "visibility".

[JoshT]

Travis hit the nail on the head.

You could also use a transparent gif at first, and just do a normal image swap at mouseover.