The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

A little coding assistance pretty please.

View previous topic View next topic 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?

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" />

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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!

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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