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

View previous topic View next topic Go down

Solved Hover Staff List

Post by Erza Loveheart on November 22nd 2014, 3:43 pm

Sooo, me and some other friends have been trying to make a Staff List Widget for a site- and we all have this particular kind of it in mind; but we don't have any idea for the codes. I'd like someone to help us with it xD


The one we have in mind:



The cool thing about that one is that when people hover the mouse over the little pictures; it shows a different picture up in the big box at the top.


The one we currently have on the site is pretty basic and we'd like to change that o.o


We don't need THAT Staff Widget exactly, but the hover-and-show part is the main attraction for us.


Any help would be greatly appreciated. ^^ So, thanks in advance~

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Hover Staff List

Post by Ramdaman on November 22nd 2014, 4:00 pm

Well, this can be done with HTML and CSS. You'll need need to give me the font color, family, and other stuff so I can make this widget more organized.

Code:
<style type="text/css">
p {
 color: #fff;
 font-family: Verdana;
}
</style>

<center><p>Owner</p><br />
<br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Head Administrator</p><br />
<br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Administrators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Global Moderators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Junior Moderators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
</center>

Now you have to replace the following:

Profile-Link: Link to the profile.
Picture-Link: Link to the avatar/picture you want o use.
To add more in a line, just copy and paste this:
Code:
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
next to the one you want it to.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Hover Staff List

Post by Erza Loveheart on November 22nd 2014, 4:46 pm

Thank you for replying! ^^


I'd like the text to be Vivaldi and the Font color to be THIS

Oh, and the site uses Invision and not PhpBB as stated on my profile xD

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Hover Staff List

Post by Ramdaman on November 22nd 2014, 5:42 pm

Use this code:

Code:
<style type="text/css">
p {
 color: #ffcc00;
 font-family: Vivaldi, Verdana, Times New Roman, Arial;
}
</style>

<center><p>Owner</p><br />
<br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Head Administrator</p><br />
<br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Administrators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Global Moderators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Junior Moderators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
</center>

I've placed the font as "Vivaldi, Verdana, Times New Roman, Arial;", in case some computers can't see Vivaldi, they will see the next available one.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Hover Staff List

Post by Erza Loveheart on November 23rd 2014, 3:26 pm

The codes you provided are very close to the Staff Widget we had in mind; but it misses a teeny little thing.


You see the big vertical rectangle on the image that I provided? The one where it says "Staff", "Luxin" & "Kazumi" respectively? The thing is, with that Staff Widget, if you hover the mouse over the smaller images at the bottom; another image appears in the rectangle. We're looking for something like that.


It'd be wonderful if you can provide us codes for that effect~ ^^

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Hover Staff List

Post by Ramdaman on November 23rd 2014, 4:47 pm

EDIT: There was a mistake in the code, I've fixed it.

Ok now try this:
Code:
<style type="text/css">
p {
 color: #ffcc00;
 font-family: Vivaldi, Verdana, Times New Roman, Arial;
}
a {
 color: #ffcc00;
 font-family: Vivaldi, Verdana, Times New Roman, Arial;
}
a img {
 color: #ffcc00;
 font-family: Vivaldi, Verdana, Times New Roman, Arial;
 border-radius: 8px;
}
a img:hover {
 color: #ffcc00;
 font-family: Vivaldi, Verdana, Times New Roman, Arial;
 border-radius: 0px;
}
</style>

<center><p>Owner</p><br />
<br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Head Administrator</p><br />
<br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Administrators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Global Moderators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
<br />
<p>Junior Moderators</p><br />
<a href="Profile-Link"><img src="Picture-Link" /></a><br />
</center>

You may edit:
Code:
a img {
 color: #ffcc00;
 font-family: Vivaldi, Verdana, Times New Roman, Arial;
 border-radius: 8px;
}

You can change the border-radius to have a more rounded image. The higher the px number, the more round it will be.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Hover Staff List

Post by Ange Tuteur on November 24th 2014, 12:44 am

I wrote a small demo for the hover effect you're looking for.

Source :
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'll use the ALT attribute of the image element to display a different image at the top.
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" />

example :

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover Staff List

Post by Erza Loveheart on November 26th 2014, 4:30 pm

@Ange Tuteur; thanks for the code- its exactly what we wanted ^^


However, can you help me with one little thing? o.o


Current Widget:



See the space right below where it says Head Administrators? We'd like to pull the two images into the same row; that is, side-by-side.


Current Code in Use for the Widget:
Code:
<!-- style of the widget --><style type="text/css">#mainBlock { height:150px } /* height of the main image block */
Code:

[font=Georgia]#staffList { text-align:center; }[/font]
[font=Georgia]#staffList a img {[/font]
[font=Georgia] border-radius:100px;[/font]
[font=Georgia] width:100px;[/font]
[font=Georgia] height:60px;[/font]
[font=Georgia]}</style>[/font]
[font=Georgia]<!-- the staff list -->[/font]
[font=Georgia]<div id="staffList">[/font]
[font=Georgia]    [/font]
[font=Georgia]   <div id="mainBlock">[/font]
[font=Georgia]       <img id="mainImage" src="http://illiweb.com/bl/logo.png" /> [/font]
[font=Georgia]   </div>[/font]
[font=Georgia]    [/font]
[font=Georgia]   <p>[/font]
[font=Georgia]       <span style="font-family: Tahoma;">OWNER</span> [/font]
[font=Georgia]   </p>[/font]
[font=Georgia]    [/font]
[font=Georgia]   <p>[/font]
[font=Georgia]       <a href="http://auroriarp.forumsline.com/u1"> <img src="http://i.imgur.com/O0Yk41J.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" /> </a> [/font]
[font=Georgia]   </p>[/font]
[font=Georgia]    <br /> [/font]
[font=Georgia]   <p>[/font]
[font=Georgia]       <span style="font-family: Tahoma;">HEAD ADMINISTRATORS</span> [/font]
[font=Georgia]   </p>[/font]
[font=Georgia]    [/font]
[font=Georgia]   <p>[/font]
[font=Georgia]       <a href="http://auroriarp.forumsline.com/u2"> <img src="http://i.imgur.com/08INFZN.png" alt="http://illiweb.com/fa/admin/icones/help.png" /> </a> <a href="http://auroriarp.forumsline.com/u3"> <img src="http://i.imgur.com/VQ72Otk.png" alt="http://illiweb.com/fa/admin/icones/help.png" /></a> [/font]
[font=Georgia]   </p>[/font]
[font=Georgia]    [/font]
[font=Georgia]   <p>[/font]
[font=Georgia]       <br /> <span style="font-family: Tahoma;">ADMINISTRATORS</span> [/font]
[font=Georgia]   </p><a href="http://auroriarp.forumsline.com/u5"> <img src="http://i.imgur.com/PLcuKxE.png" alt="http://illiweb.com/fa/admin/icones/help.png" /> </a> [/font]
[font=Georgia]</div>[/font]
[font=Georgia] [/font]
[font=Georgia]<!-- technical stuff --><script type="text/javascript">(function() {[/font]
[font=Georgia]var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;[/font]
[font=Georgia]for (i=0; i<img.length; i++) {[/font]
[font=Georgia] if (!/mainImage/.test(img[i].id)) {[/font]
[font=Georgia] img[i].onmouseover = function() { main.src = this.alt }[/font]
[font=Georgia] img[i].onmouseout = function() { main.src = def }[/font]
[font=Georgia] }[/font]
[font=Georgia]}[/font]
[font=Georgia]})();</script>



Can you please make the necessary changes to the code or tell me how to do that, then it'd be wonderful! c:


Also, @Ramdaman, thanks a lot for helping as well~

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Hover Staff List

Post by SarkZKalie on November 26th 2014, 6:50 pm

Add float:left to your CSS :3
Code:
#staffList a img{
float: left; border-radius: 100px; width: 50px; height: 50px;}

Sent from my desk phone

SarkZKalie
Forumember

Male Posts : 448
Reputation : 78
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: Hover Staff List

Post by Ange Tuteur on November 27th 2014, 3:59 am

Find this :
Code:
#staffList a img {
  border-radius:100px;
  width:100px;
  height:60px;
}

and replace it with this :
Code:
#staffList a img {
  width:60px;
  border-radius:100px;
}

The problem is that the width of the images are 100px so there wasn't enough space for them to be on the same line. I set it to 60px, but you can change that to a lower or slightly higher value. The height will automatically be adjusted if you change the width.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover Staff List

Post by Erza Loveheart on November 29th 2014, 6:00 am

Okay, so thanks to you guys we were able to make the Staff Widget work without a single flaw!


Thanks for the help~


This can be locked and moved now.

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Hover Staff List

Post by Ange Tuteur on November 29th 2014, 6:08 am

Great too hear !

Topic archived

Have a great day. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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