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.

Help with this widget

View previous topic View next topic Go down

In progress Help with this widget

Post by Swagbito on January 8th 2015, 6:13 am

So I used the widget on Erza's post and....

http://rubbershinobi.forumotion.com/
Help me fix this.
avatar
Swagbito
Forumember

Posts : 176
Reputation : 4
Language : English & Japanese

http://rubbershinobi.forumotion.com/

Back to top Go down

In progress Re: Help with this widget

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

Hello @Swagbito,

Could you explain the problem and provide any information such as codes that you're having touble with ?

Thanks
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2881
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Help with this widget

Post by Swagbito on January 8th 2015, 8:07 am

Im horrible at coding. And it's supposed to be circles for the images and a hover effect.
avatar
Swagbito
Forumember

Posts : 176
Reputation : 4
Language : English & Japanese

http://rubbershinobi.forumotion.com/

Back to top Go down

In progress Re: Help with this widget

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

So, you want to round the images, or do you just want the widget like this ?
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2881
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Help with this widget

Post by Swagbito on January 8th 2015, 9:09 am

The second.
avatar
Swagbito
Forumember

Posts : 176
Reputation : 4
Language : English & Japanese

http://rubbershinobi.forumotion.com/

Back to top Go down

In progress Re: Help with this widget

Post by Swagbito on January 10th 2015, 3:43 am

Bump.
avatar
Swagbito
Forumember

Posts : 176
Reputation : 4
Language : English & Japanese

http://rubbershinobi.forumotion.com/

Back to top Go down

In progress Re: Help with this widget

Post by Ange Tuteur on January 10th 2015, 4:04 am

Then add the following code to a widget :
Code:
<!-- style of the widget -->
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style>

<!-- the staff list -->
<div id="staffList">
  <div id="mainBlock">
    <img id="mainImage" src="http://illiweb.com/bl/logo.png" /> 
 </div>
  <a href="/u1">
    <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />
  </a>
  <br />
  <a href="/u2">
    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://illiweb.com/fa/admin/icones/help.png" />
  </a>
</div>
   
<!-- technical stuff -->
<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>

You then need to modify the following :
Code:
  <a href="/u2">
    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://illiweb.com/fa/admin/icones/help.png" />
  </a>

href will be the URL of the user profile. src is the URL of your image, and alt is the image you want to display on hover.
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2881
Language : EN10, FR5
Location : Macungie, PA

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