[CSS] Navibar jeden button einzeln hovern.

hoi.. ich bins mal wieder^^
ich war mit einen user hier aus dem forum (terra-outlaw) im meinen chat um ihm ein bissel bei seinen forum zu helfen und ihm ein paar fragen zubeantworten, da war ich bei ihm im forum und habe mir das css angeschaut da bin ich auf die idee gekommen das man die navi bar doch bestimmt einzeln hovern kann also machte ich mich (mit erkältung^^) an die arbeit.. und heute is es nun auch fertig geworden^^

also hier mal nen kleines tut wie man jeden button der navibar einzeln hover (bilderwegsel bei maus berührung) kann. ABER es ist nur möglich die standart buttons zu hovern und nicht die selber erstellten.. also das geht dann nich^^

so nun zum code und zum einbau^^

Code siehe unten!

ihr müsst nur noch ein paar große änderungen anstellen^^

ihr müsst die buttons aus der bilderverwaltung entfernen und diese dann im CSS nach diesem Muster einsetzen:

#i_icon_mini_gallery{
background-image:url(Hier die standard bilder der navi);
height:29px;
width:65px;
}

und dann die bilder die erscheinen sollen in:

#i_icon_mini_gallery:hover{
background-image:url(Hier die bilder die bei maus berührung wegseln solln);
height:29px;
width:65px;
}

und ihr müsst die höhe (height:29px;)
und die breite (width:65px;)
der bilder angeben wenn ihr die gleichen bilder nehmt also der hoberbild nicht größer oder kleiner ist dann nehmt ihr die gleiche größe...
am einfachsten geht das mit (soweit ich das testen konnte) http://abload.de/ (müsst ihr aber nich nehmen könnt ihr auch woanders hochladen^^) hier kann man ganz leicht gucken wie groß das bild ist:


damit sollte das ganze leichter gehen..^^

und ihr müsst dann die standard bilder die in der bilderverwaltung sind raus löschen und es dadurch: http://illiweb.com/fa/empty.gif ersetzen..

so ihr könnt euch das in meinen test forum nochmal genau angucken unter:
http://steive.forumieren.de

so nun noch der code und dann viel spaß beim einbauen..^^
sollte ich noch ein button vergessen haben bitte melden..

Code:

#i_icon_mini_gallery{
background-image:url(Standard bild-URL);
height:29px;
width:65px;
}
#i_icon_mini_gallery:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:65px;
}
#i_icon_mini_index{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_index:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_portal {
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_portal:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_new_message {
background-image:url(Standard bild-URL);
height:29px;
width:93px;
}
#i_icon_mini_message:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:93px;
}
#i_icon_mini_message {
background-image:url(Standard bild-URL);
height:29px;
width:93px;
}
#i_icon_mini_register {
background-image:url(Standard bild-URL);
height:29px;
width:82px;
}
#i_icon_mini_register:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:82px;
}
#i_icon_mini_calendar{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_calendar:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_members{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_members:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_groups{
background-image:url(Standard bild-URL);
height:29px;
width:110px;
}
#i_icon_mini_groups:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:110px;
}
#i_icon_mini_faq{
background-image:url(Standard bild-URL);
height:29px;
width:62px;
}
#i_icon_mini_faq:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:62px;
}
#i_icon_mini_search{
background-image:url(Standard bild-URL);
height:29px;
width:70px;
}
#i_icon_mini_search:hover{
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:70px;
}
#i_icon_mini_profile {
background-image:url(Standard bild-URL);
height:29px;
width:62px;
}
#i_icon_mini_profile:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:62px;
}
#i_icon_mini_login:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:55px;
}
#i_icon_mini_login {
background-image:url(Standard bild-URL);
height:29px;
width:55px;
}
#i_icon_mini_logout {
background-image:url(Standard bild-URL);
height:29px;
width:61px;
}
#i_icon_mini_logout:hover {
background-image:url(bild das bei maus berührung wegseln soll);
height:29px;
width:61px;
}

liebe grüße.
steive

ps. wer schreibfehler findet darf sie behalten^^

Edit: firefox hat keine probleme mit der anzeige.
IE 8 hat leichte probleme..