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.

what are the codes for putting mouse over menu images in css?

View previous topic View next topic Go down

Solved what are the codes for putting mouse over menu images in css?

Post by Diana on May 15th 2015, 1:25 pm

what are the codes for putting mouse over menu images in css?


Last edited by rhe on May 15th 2015, 6:14 pm; edited 1 time in total

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Ace 1 on May 15th 2015, 1:28 pm

What do you mean by "putting mouse over"? Like a glow code or just the mouse hover event?

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Diana on May 15th 2015, 1:37 pm

just the mouse hover event

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Ace 1 on May 15th 2015, 1:44 pm

Lol, you're very broad. Try this:

Administration Panel > Display > Colors > CSS StyleSheet

Then add this code.

Code:
:hover {
css declarations;
}

In front of the ":" just add "a" or "p" depending on what you want to hover over.

(a is for links and p is for regular text)

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Diana on May 15th 2015, 1:45 pm

I don't get it. Can you post one full code. Let's say home button.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Ace 1 on May 15th 2015, 2:00 pm

@rhe Hey my bad, I'm still learning about the navbar. If you want some code that can change the color of the text of the item that you're hovering over, then use this in the Stylesheet:

Code:
ul.navlinks a:hover {
color:#ff0000;

}

This code changes a navlink color to #red when you hover over it. Hope this helps. If you want to change more stuff, then just add more code in the empty space.

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Diana on May 15th 2015, 2:23 pm

I want to do the menu in images not text. When you hover over the menu image, it changes to another image, that's what I want.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Ace 1 on May 15th 2015, 3:02 pm

Hey @rhe

Add this to your stylesheet

Code:
<head>
<style type="text/css">
.imgBox {
width: 191px;
height: 191px;
background: url(*your first image url*) no-repeat;
}
.imgBox: hover {
width: 191px;
height: 191px;
background: url(*your second image url*) no-repeat;
}
</style>
</head>
<div class="imgBox"></div>

Hope this helps ya

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Diana on May 15th 2015, 3:05 pm

but how do I assign the codes to different links?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Ace 1 on May 15th 2015, 5:00 pm

sorry but I'm not that skilled with navlinks lol just wait for someone else to help you, k?

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Diana on May 15th 2015, 5:08 pm

Okay... can someone else please help me? I know there are two codes for one link...one of them should look something like this:
Code:
 #i_icon_mini_index{width:107px; height:94px; background:url("*image url*") no-repeat 0 0;}

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Ange Tuteur on May 15th 2015, 5:12 pm

Hi @rhe,

Is this what you're looking for ?
Code:
/* Index / Home */
#i_icon_mini_index{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(/img.gif) no-repeat 0 0;}

/* Portal */
#i_icon_mini_portal{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(/img.gif) no-repeat 0 0;}

/* FAQ */
#i_icon_mini_faq{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(/img.gif) no-repeat  0 0;}

/* Search */
#i_icon_mini_search{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(/img.gif) no-repeat  0 0;}

/* Members */
#i_icon_mini_members{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(/img.gif) no-repeat  0 0;}

/* Groups */
#i_icon_mini_groups{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(/img.gif) no-repeat  0 0px;}

/* Profile */
#i_icon_mini_profile{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(/img.gif) no-repeat  0 0;}

/* PM message */
#i_icon_mini_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(/img.gif) no-repeat 0 0;}

/* PM new message */
#i_icon_mini_new_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(/img.gif) no-repeat  0 0;}

/* Logout */
#i_icon_mini_logout{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(/img.gif) no-repeat  0 0;}

/* Register */
#i_icon_mini_register{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(/img.gif) no-repeat  0 0;}

/* Login */
#i_icon_mini_login{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(/img.gif) no-repeat  0 0;}

Make sure that your navbar images in pics management are the placeholder http://illiweb.com/empty.gif after this you need only replace /img.gif by the URL of your image, and adjust the width and height so that it's the exact dimensions of your image.

Each ruleset pairs are marked with a comment on what link they modify. The first rule is default, and the second is the hover image.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Diana on May 15th 2015, 5:25 pm

@Ange Tuteur wrote:Hi @rhe,

Is this what you're looking for ?
Code:
/* Index / Home */
#i_icon_mini_index{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(/img.gif) no-repeat 0 0;}

/* Portal */
#i_icon_mini_portal{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(/img.gif) no-repeat 0 0;}

/* FAQ */
#i_icon_mini_faq{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(/img.gif) no-repeat  0 0;}

/* Search */
#i_icon_mini_search{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(/img.gif) no-repeat  0 0;}

/* Members */
#i_icon_mini_members{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(/img.gif) no-repeat  0 0;}

/* Groups */
#i_icon_mini_groups{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(/img.gif) no-repeat  0 0px;}

/* Profile */
#i_icon_mini_profile{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(/img.gif) no-repeat  0 0;}

/* PM message */
#i_icon_mini_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(/img.gif) no-repeat 0 0;}

/* PM new message */
#i_icon_mini_new_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(/img.gif) no-repeat  0 0;}

/* Logout */
#i_icon_mini_logout{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(/img.gif) no-repeat  0 0;}

/* Register */
#i_icon_mini_register{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(/img.gif) no-repeat  0 0;}

/* Login */
#i_icon_mini_login{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(/img.gif) no-repeat  0 0;}

Make sure that your navbar images in pics management are the placeholder http://illiweb.com/empty.gif after this you need only replace /img.gif by the URL of your image, and adjust the width and height so that it's the exact dimensions of your image.

Each ruleset pairs are marked with a comment on what link they modify. The first rule is default, and the second is the hover image.

thanks, that's what I was looking for. Had them once and forgot. Smile

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: what are the codes for putting mouse over menu images in css?

Post by Ange Tuteur on May 15th 2015, 6:24 pm

You're welcome, I have them saved on my desktop, just in case. Smile

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
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