top



I would need assistance on coding my CSS so that when I hover over an image, it would change on the navigation bar. I already have 2 images set up for each link on the navigation bar. I just can not seem to find the right code. o-o

Something like this:

Code:

#i_icon_mini_index {
background:url("http://a.imageshack.us/img705/3370/forumgu.png")  no-repeat center !important;
}

#i_icon_mini_index:hover {
background:url("http://a.imageshack.us/img718/3673/portalcs.png")  no-repeat center !important;
}

do you know the other nams? (:

I think I have tried this... But I was wondering if you needed to put something similar to html as a href? Like a link for the images? o.o

huh? if you want it for forumotion navigation bar then you don't need HTML..
only delete the image from the pics managements and add the code above in the CSS (:

So if I am recieving this correctly, I delete the image from the Pics Management for index. Then I go to the CSS and plug in the code? o-o

yah Smile

Hmm.. I tried that and a question mark comes onto my image. However, when I do hover over, the image changes.

Isn't that what u asked about? Stress

lol don't stress please! :3

This is what I'm talking about. :-)

Hello.. read you first post.. you want to have an hover image in the navbar right?

Lol, I think we have a misunderstanding. Indeed I want a hover image. It is hovering. However, if you look at the image, the first image on the navigation bar has a little question mark in the middle. Razz

huh.. give me the link.. or try add your image (:

Here's what I did to my CSS

Code:
#i_icon_mini_index{
background-image: url(http://i64.servimg.com/u/f64/15/94/31/53/forum111.png);
width: 110px;
height: 35px;
}
#i_icon_mini_index:hover{
background-image: url(http://i64.servimg.com/u/f64/15/94/31/53/forum211.png);
width: 110px;
height: 35px;
}

#i_icon_mini_portal{
background-image: url(http://img826.imageshack.us/img826/3835/portalg.png);
width: 68px;
height: 40px;
}
#i_icon_mini_portal:hover{
background-image: url(http://img510.imageshack.us/img510/7482/portal1h.png);
width: 68px;
height: 40px;
}

#i_icon_mini_calendar{
background-image: url(http://img825.imageshack.us/img825/2052/calendarf.png);
width: 68px;
height: 40px;
}
#i_icon_mini_calendar:hover{
background-image: url(http://img443.imageshack.us/img443/4087/calendar1.png);
width: 68px;
height: 40px;
}

#i_icon_mini_faq{
background-image: url(http://img507.imageshack.us/img507/4572/faqy.png);
width: 68px;
height: 40px;
}
#i_icon_mini_faq:hover{
background-image: url(http://img513.imageshack.us/img513/4120/faq1.png);
width: 68px;
height: 40px;
}

#i_icon_mini_search{
background-image: url(http://img828.imageshack.us/img828/2660/searchyq.png);
width: 68px;
height: 40px;
}
#i_icon_mini_search:hover{
background-image: url(http://img252.imageshack.us/img252/2262/search1s.png);
width: 68px;
height: 40px;
}

#i_icon_mini_members {
background-image: url(http://img824.imageshack.us/img824/5018/membersv.png);
width: 68px;
height: 40px;
}
#i_icon_mini_members:hover{
background-image: url(http://img209.imageshack.us/img209/968/members1.png);
width: 68px;
height: 40px;
}

#i_icon_mini_groups {
background-image: url(http://img406.imageshack.us/img406/563/groupsoy.png);
width: 68px;
height: 40px;
}
#i_icon_mini_groups:hover{
background-image: url(http://img577.imageshack.us/img577/4556/groups1.png);
width: 68px;
height: 40px;
}


#i_icon_mini_profile{
background-image: url(http://img403.imageshack.us/img403/9169/profileju.png);
width: 68px;
height: 40px;;
}
#i_icon_mini_profile:hover{
background-image: url(http://img41.imageshack.us/img41/2639/profile1n.png);
width: 68px;
height: 40px;
}

#i_icon_mini_message{
background-image: url(http://img194.imageshack.us/img194/6122/messagesa.png);
width: 68px;
height: 40px;
}
#i_icon_mini_message:hover{
background-image: url(http://img9.imageshack.us/img9/5113/messages1.png);
width: 68px;
height: 40px;
}

#i_icon_mini_new_message{
background-image: url(http://img9.imageshack.us/img9/4229/newmessageha.png);
width: 68px;
height: 40px;
}
#i_icon_mini_new_message:hover{
background-image: url(http://img708.imageshack.us/img708/7149/newmessage1n.png);
width: 68px;
height: 40px;
}

#i_icon_mini_register{
background-image: url(http://img121.imageshack.us/img121/9864/registergs.png);
width: 68px;
height: 40px;
}
#i_icon_mini_register:hover{
background-image: url(http://img217.imageshack.us/img217/6419/register1.png);
width: 68px;
height: 40px;
}

#i_icon_mini_login{
background-image: url(http://img808.imageshack.us/img808/3720/loginoq.png);
width: 68px;
height: 40px;
}
#i_icon_mini_login:hover{
background-image: url(http://img522.imageshack.us/img522/8541/login1y.png);
width: 68px;
height: 40px;
}

#i_icon_mini_logout{
background-image: url(http://img813.imageshack.us/img813/2263/logoutz.png);
width: 68px;
height: 40px;
}
#i_icon_mini_logout:hover{
background-image: url(http://img705.imageshack.us/img705/6774/logout1.png);
width: 68px;
height: 40px;
}

And... If I am not mistaken, this is what you told me to do for the pic? Happy

CSS is fine (:
add this link in there.. where the question mark is (:

Code:
http://illiweb.com/fa/empty.gif

Woot! Gangstar you are the man! You kill everything! Razz Thank-you buddy. Smile

Lol Happy
Ty ;D

Glad i could help (:

Solved + Locked