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.

Hover Staff List Help Needed

View previous topic View next topic Go down

In progress Hover Staff List Help Needed

Post by Stella hAodha on February 6th 2015, 8:00 am

Okay, I wish to make a hover staff list for my site kinda like the one in the spoiler below

What I have in mind:


I want pretty much the same thing but if it looks a little different, that's fine too.

If anyone can help me make a custom code for a hover staff list that looks like the one in the spoiler,
I'd really appreciate it.

Btw, my forum's CSS is Invision.

I have all the art work for the hover staff list widget as well. I just need the basic code and I can edit everything else.

Thanks in advance~

Stella hAodha
New Member

Female Posts : 16
Reputation : 1
Language : English
Location : California

http://fairytailevolutionrp.forumotion.com/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Ange Tuteur on February 6th 2015, 9:26 am

Hello @Stella hAodha,

Add this 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>


A user in the list consists of the following syntax :
Code:
  <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>

The following is a link to the user profile. ( currently the founder; u1 )
Code:
<a href="/u1"></a>

and the image. The image URL in the SRC attribute is the image you'll see by default. The image URL in the ALT attribute is the image you'll see at the top when you hover this image.
Code:
<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" />

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Stella hAodha on February 6th 2015, 9:30 am

i was hoping for an all in one code =w= seeing as i'm a complete noob at coding. i can do simple code edits and add codes to things but that's as far as my knowledge goes...

Stella hAodha
New Member

Female Posts : 16
Reputation : 1
Language : English
Location : California

http://fairytailevolutionrp.forumotion.com/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by SLGray on February 6th 2015, 9:35 am

It is just one code. Ange Tuteur is explaining parts of it.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Ange Tuteur on February 6th 2015, 9:35 am

If you have any questions, do not hesitate. You'll see by default I have two images setup as an example which you can play with Smile
Code:
  <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>


I also forgot to mention above those images, you'll see the main image :
Code:
  <div id="mainBlock">
    <img id="mainImage" src="http://illiweb.com/bl/logo.png" />
 </div>

Just replace http://illiweb.com/bl/logo.png by the image URL you want to be the default image when not hovering anyone.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Stella hAodha on February 6th 2015, 9:38 am

would it be possible to put the entire code all together in order of how it should look in my widget? I'm sorry if this is a a pain, its just the different parts of the code all in pieces makes it kind of hard to figure out which part goes where...

Stella hAodha
New Member

Female Posts : 16
Reputation : 1
Language : English
Location : California

http://fairytailevolutionrp.forumotion.com/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by SLGray on February 6th 2015, 9:41 am

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>


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Stella hAodha on February 6th 2015, 10:03 am

i hate to be a bother, but i can't seem to get the code to work right :/

What my widget looks like currently:

I honestly SUCK at coding T^T Please help me~!

Thanks in advance~

Stella hAodha
New Member

Female Posts : 16
Reputation : 1
Language : English
Location : California

http://fairytailevolutionrp.forumotion.com/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by niquon715 on February 6th 2015, 10:07 am

where it says u1 and u2 those are the user ids youre supposed to change the images under them
so it would be img src= your image

niquon715
Forumember

Posts : 83
Reputation : 10
Language : english

http://celestialfireacademy.forumotion.com/forum

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Stella hAodha on February 6th 2015, 10:09 am

i've decided to give up =w= topic can be locked now, thanks for all your help, i was just too much of a noob to be able to do a complex code

Stella hAodha
New Member

Female Posts : 16
Reputation : 1
Language : English
Location : California

http://fairytailevolutionrp.forumotion.com/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Base on February 6th 2015, 2:24 pm

Locked upon author's request.

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

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