Many people are searching for this code, and not all codes are working for them :)
So, this is a bit easyer, ussualy a .js and/or .css file are required, but this one is simple!
STEP 1
Paste this into your page header:
<script type="text/javascript"><!--
function setFirstChildImgDisplay(el,vis) {
if(!el || !el.getElementsByTagName) return;
el.getElementsByTagName('img')[0].style.display=vis;
}
// -->
</script>
STEP 2
Paste this as a page content where you want it to appear:
<div onmouseover="setFirstChildImgDisplay(this,'block')"
onmouseout="setFirstChildImgDisplay(this,'none')">Wahoooooo some Text yipeeeee
<img src="YOURIMAGEHERE.jpg" alt="short description of image"
style="display:none;margin-top:1em;"></div>
Don't forget to replace "YOURIMAGEHERE.jpg" to your image!
Sorry for my language, i'm a freaking Romanian!