1,105,320 Community Members

Image onMouseover in Text [javascript]

Member Avatar
Milutz94
Newbie Poster
1 post since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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!

Member Avatar
Airshow
WiFi Lounge Lizard
2,798 posts since Apr 2009
Reputation Points: 333 [?]
Q&As Helped to Solve: 393 [?]
Skill Endorsements: 11 [?]
Team Colleague
 
0
 

Mulţumesc.

Member Avatar
Troy III
Practically a Posting Shark
891 posts since Jun 2008
Reputation Points: 174 [?]
Q&As Helped to Solve: 119 [?]
Skill Endorsements: 10 [?]
 
0
 

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?

Member Avatar
dantinkakkar
Junior Poster
174 posts since Aug 2011
Reputation Points: 19 [?]
Q&As Helped to Solve: 22 [?]
Skill Endorsements: 4 [?]
 
0
 

If you can explain what it's use is...

Member Avatar
stultuske
Posting Expert
5,290 posts since Jan 2007
Reputation Points: 935 [?]
Q&As Helped to Solve: 774 [?]
Skill Endorsements: 35 [?]
Featured
 
0
 

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.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: