The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Hover Staff List Help Needed

5 posters

Go down

In progress Hover Staff List Help Needed

Post by Stella Ó hAodha 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
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 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://2img.net/i/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://2img.net/i/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
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Stella Ó hAodha 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
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 February 6th 2015, 9:35 am

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


Hover Staff List Help Needed Slgray10

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

Male Posts : 51554
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Ange Tuteur 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://2img.net/i/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://2img.net/i/bl/logo.png" />
 </div>

Just replace https://2img.net/i/bl/logo.png by the image URL you want to be the default image when not hovering anyone.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Stella Ó hAodha 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
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 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://2img.net/i/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://2img.net/i/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>


Hover Staff List Help Needed Slgray10

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

Male Posts : 51554
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Hover Staff List Help Needed

Post by Stella Ó hAodha 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
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 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
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 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
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 February 6th 2015, 2:24 pm

Locked upon author's request.
Base
Base
Forumaster

Male Posts : 10383
Reputation : 1695
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Back to top

- Similar topics

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