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!

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!

So, what does it do, Milutz94?

if I read correctly: this is just what the :hover of css does, with that difference, that the dimensions of your image is in no way linked to the original image.