Hide Image until mouseover?

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

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

Code:

---

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

---

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

Code:

---

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

Quote:

---

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?

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

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

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.