Creating image rollover on navbar.

Go down

Solved Creating image rollover on navbar.

Post by blindbat1457 on August 26th 2010, 11:40 pm

Not sure how to word the title..

Anyways is there a way to make the images change when you hover them on the navbar?


Last edited by blindbat1457 on August 30th 2010, 11:17 am; edited 1 time in total
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by blindbat1457 on August 27th 2010, 8:27 am

/bump
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by Anime Creator on August 28th 2010, 6:47 pm

what do you mean please use more than 10 words , use details like 200 words so i can understand what you want .
avatar
Anime Creator
Forumember

Posts : 337
Reputation : 7
Language : english

http://www.narutoland.net/index.htm

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by LostLegend on August 28th 2010, 7:44 pm

@Anime Creator wrote:what do you mean please use more than 10 words , use details like 200 words so i can understand what you want .

He is basically asking if there is a way to change the image on the navigation bar when you roll your mouse over it.
avatar
LostLegend
Forumember

Posts : 922
Reputation : 23
Language : English

http://naruto-role-play-rpg.forumotion.com/

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by blindbat1457 on August 29th 2010, 9:47 am

@Anime Creator wrote:what do you mean please use more than 10 words , use details like 200 words so i can understand what you want .

I am pretty sure there are more than 10 words and I am pretty sure it is clear.

Anyways to break it down for you what I want is a roll over image on my navigation bar.

Example:
http://websitetips.com/css/tutorials/menus/

When you hover the links it changes images.
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by Emilio on August 29th 2010, 12:13 pm

You can easily change the opacity of the navbar so they look transparant .

Emilio
Forumember

Male Posts : 496
Reputation : 17
Language : Dutch , English ( Learning French & Spanish)

http://www.graphilicious.forumotion.com

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by blindbat1457 on August 30th 2010, 11:07 am

Not what I want...
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by blindbat1457 on August 30th 2010, 11:16 am

Thanks to Gangstar the code I was looking for is this:

Code:
#i_icon_mini_index {
background-image: url(IMAGE1);
width: 105px;
height: 135px;
}
#i_icon_mini_index:hover {
background-image: url(IMAGE2);
width: 105px;
height: 135px;
}

#i_icon_mini_profile {
background-image: url(IMAGE1);
width: 105px;
height: 135px;
}
#i_icon_mini_profile:hover {
background-image: url(IMAGE2);
width: 105px;
height: 135px;
}


#i_icon_mini_message {
background-image: url(IMAGE1);
width: 105px;
height: 135px;
}
#i_icon_mini_message:hover {
background-image: url(IMAGE2);
width: 105px;
height: 135px;
}

#i_icon_mini_new_message {
background-image: url(IMAGE1);
width: 105px;
height: 135px;
}
#i_icon_mini_new_message:hover {
background-image: url(IMAGE2);
width: 105px;
height: 135px;
}


#i_icon_mini_logout {
background-image: url(IMAGE1);
width: 105px;
height: 135px;
}
#i_icon_mini_logout:hover {
background-image: url(IMAGE2);
width: 105px;
height: 135px;
}


#i_icon_mini_login {
background-image: url(IMAGE1);
width: 105px;
height: 135px;
}
#i_icon_mini_login:hover {
background-image: url(IMAGE2);
width: 105px;
height: 135px;
}

#i_icon_mini_register {
background-image: url(IMAGE1);
width: 105px;
height: 135px;
}
#i_icon_mini_register:hover {
background-image: url(IMAGE2);
width: 105px;
height: 135px;
}

/solved
/locked
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Creating image rollover on navbar.

Post by kirk on August 30th 2010, 12:26 pm

Since the thread was marked as solved i will now lock Smile
avatar
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Back to top


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