A little coding assistance pretty please.

Go down

Solved A little coding assistance pretty please.

Post by Eden Alexandria on January 8th 2015, 12:37 am

http://help.forumotion.com/t136908-hover-staff-list

In the link above a hover code is being discussed. I have constructed my own, but I am having a little glitch.

Code:
<!--                  Widget styling                  --><style type="text/css">#mainBlock { height:320px} /* widget height */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style> 
<!--                  -->
<div id="staffList">
                                    
   <div id="mainBlock">
                         <img src="http://i.imgur.com/V8eFWyD.png" id="mainImage" />                   
   </div><img style="width: 150px, height: 55px;" src="http://i.imgur.com/ExixZdN.png" /><br /><br />          <a href="/u2124"><img alt="http://i.imgur.com/f9oCeov.jpg" src="http://i.imgur.com/8FSB0WH.jpg" /></a><br /><br /><img style="width: 150px, height: 55px;" src="http://i.imgur.com/gFelOCY.png" /><br /><br />          <a href="/u2009"><img alt="http://i.imgur.com/rTXwquy.jpg" src="http://i.imgur.com/v1TJLoN.jpg" /></a>
</div>
                     
<!--                  Javascript Portion                  --><script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

In the middle section where I have the images, I added a "header" image of sorts for each level of staff. These images are as follow:

Code:

<img style="width: 150px, height: 55px;" src="http://i.imgur.com/ExixZdN.png" />

and

<img style="width: 150px, height: 55px;" src="http://i.imgur.com/gFelOCY.png" />

The issue is that when mousing over these images, the main image at the top disappears. So my question is this: is there a way to make it so the "onmouseover" function won't affect those images?
avatar
Eden Alexandria
Forumember

Female Posts : 36
Reputation : 1
Language : English

http://www.narutolegacy.com/

Back to top Go down

Solved Re: A little coding assistance pretty please.

Post by Ange Tuteur on January 8th 2015, 6:08 am

Hello @Eden Alexandria,

Try this :
Code:
<!--                  Widget styling                  --><style type="text/css">#mainBlock { height:320px} /* widget height */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style>
<!--                  -->
<div id="staffList">
                                    
   <div id="mainBlock">
                         <img src="http://i.imgur.com/V8eFWyD.png" id="mainImage" />                  
   </div><img class="ignore" style="width: 150px, height: 55px;" src="http://i.imgur.com/ExixZdN.png" /><br /><br />          <a href="/u2124"><img alt="http://i.imgur.com/f9oCeov.jpg" src="http://i.imgur.com/8FSB0WH.jpg" /></a><br /><br /><img class="ignore" style="width: 150px, height: 55px;" src="http://i.imgur.com/gFelOCY.png" /><br /><br />          <a href="/u2009"><img alt="http://i.imgur.com/rTXwquy.jpg" src="http://i.imgur.com/v1TJLoN.jpg" /></a>
</div>
                    
<!--                  Javascript Portion                  --><script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id) && !/ignore/.test(img[i].className)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

I added a filter, for images you want to ignore add the class "ignore" to them. For example :
<img class="ignore" style="width: 150px, height: 55px;" src="http://i.imgur.com/ExixZdN.png" />
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2911
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: A little coding assistance pretty please.

Post by Eden Alexandria on January 8th 2015, 6:55 am

Ah, I see. Thank you very much, Ange! This topic is solved!
avatar
Eden Alexandria
Forumember

Female Posts : 36
Reputation : 1
Language : English

http://www.narutolegacy.com/

Back to top Go down

Solved Re: A little coding assistance pretty please.

Post by Ange Tuteur on January 8th 2015, 7:00 am

You're welcome

Topic archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2911
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum