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.

How to do roll over text

View previous topic View next topic Go down

Solved How to do roll over text

Post by Kamui on June 21st 2015, 8:00 am

When I hover my mouse over a picture I want text to pop up, how do I go about doing this?

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by Ange Tuteur on June 21st 2015, 10:40 am

You can use the title attribute, which will display a tooltip after a few seconds of hovering over the image. Example :
Code:
<img src="http://i62.servimg.com/u/f62/11/22/70/40/solved10.png" title="Solved" />

This is of course for places where HTML formats.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to do roll over text

Post by Kamui on June 21st 2015, 11:53 pm

So put this code in HTML Managements?

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by SLGray on June 22nd 2015, 2:48 am

If you have HTML activated for the whole forum and each member has it activated in their profiles, you can use the example code in posts.


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


SLGray
Administrator
Administrator

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

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by Kamui on June 22nd 2015, 4:20 am

Yeah, this isn't the exact code i'm looking for. Going to show another forum for an example, but if you look at the "Forum Staff" where it has admins and mods, when you roll your mouse over the text, names pop up. How can I do this?

Forum:     http://www.ultimateshinobi.org/forum

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by Ange Tuteur on June 22nd 2015, 11:09 am

This is the closest I'll give you :
Code:
<style type="text/css">.userPhoto {
  height:75px;
  width:75px;
  background:#EEE;
  border:1px solid #CCC;
  text-align:center;
  overflow:hidden;
  position:relative;
  display:inline-block;
}

.userPhoto > img {
  width:100%;
}

.userPhoto > a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  font-size:11px;
  background-color:#FFF;
  background-color:rgba(255, 255, 255, 0.5);
  opacity:0;
  transition:300ms;
}

.userPhoto > a:hover { opacity:1 }</style>

<div class="userPhoto">
  <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" />
  <a href="/u1">Ange</a>
</div>

<div class="userPhoto">
  <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" />
  <a href="/u2">Test Dummy</a>
</div>

You only need to change the IMG SRC to display a different avatar, the anchor's HREF to change the location you'll be link to, and finally the text.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to do roll over text

Post by Kamui on June 22nd 2015, 5:24 pm

Any way I can manipulate the code to go over an image like this? Because I did the code, but the one you gave me is just a small box which is only good for a side widget, I wanted it to be for the forums under my categories. 

Edit: Here's a link to my forum so you can see what I'm talking about because I tried using the code on one of my pictures but all it did was reduce its size and give it a white background.


Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by Ange Tuteur on June 22nd 2015, 5:27 pm

Simply change the height and width to meet the dimensions of your images, or remove the height and width properties altogether. You'll find them at the top of the code I gave you, under this rule :
Code:
.userPhoto {
  height:75px;
  width:75px;
  background:#EEE;
  border:1px solid #CCC;
  text-align:center;
  overflow:hidden;
  position:relative;
  display:inline-block;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to do roll over text

Post by Kamui on June 22nd 2015, 5:41 pm

Okay, that worked perfectly but one last thing, how do I get rid of that white background behind the picture? I want it to be transparent to blend in with the forum.

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by Ange Tuteur on June 22nd 2015, 5:50 pm

Remove the background and border properties. Wink
Code:
  background:#EEE;
  border:1px solid #CCC;

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to do roll over text

Post by Kamui on June 22nd 2015, 5:59 pm

>_> I know you're getting tired of my face but one last thing Ange. I'd like to change the font color.

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by Ange Tuteur on June 22nd 2015, 6:03 pm

Find the rule that accesses the link and add the color property.
Code:
.userPhoto > a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  font-size:11px;
  background-color:#FFF;
  background-color:rgba(255, 255, 255, 0.5);
  opacity:0;
  transition:300ms;
}

for example :
Code:
color:#FF0;

You can also add this to the last rule I told you about.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to do roll over text

Post by Kamui on June 22nd 2015, 6:18 pm

Cool Thanks for the help Ange

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: How to do roll over text

Post by SLGray on June 22nd 2015, 9:31 pm

Topic solved and archived


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


SLGray
Administrator
Administrator

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

http://fmthemes.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