Start New Discussion within our Web Development Community

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.

This article has been dead for over six months. Start a new discussion instead.