Rollover:Hover Menü {CSS} Tüm Versiyonlar İçin!

[TuaL]

1.Yönetim Paneli > Afiş asmak > Anasayfa (altından) > Başlık & Tarıyıcı
Menüde sadece resimleri göster : Evet

sonra Gönder tıklıyoruz.

2.Yönetim Paneli > Afiş asmak > Renkler ve resimler (altından) > Resim yönetimi > Gelişmiş Mod > Genel / navigasyon (içinden)

Indeks, Galeri, SSS, Arama, Üye Listesi, Kullanıcı Grupları, Profilinizi Değiştirin, Özel Mesajlar, Yeni özel mesaj, Kayıt Ol, Giriş yap, Çık

bunların resim linklerini siliyoruz sonra Gönder tıklıyoruz.

3.Yönetim Paneli > Afiş Asmak > Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine, koda resimlerin linklerini ekleyerek ve boyutlarını yazarak)

Kod:

/*** Dj TuaL - Menü ***/
#i_icon_mini_index{
background-image: url('ANASAYFA');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_calendar{
background-image: url('TAKVİM');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_gallery{
background-image: url('GALERİ');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_portal{
background-image: url('PORTAL');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_faq{
background-image: url('YARDIM');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_search{
background-image: url('ARAMA');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_groups{
background-image: url('KULLANICI GRUPLARI');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_members{
background-image: url('ÜYE LİSTESİ');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_profile{
background-image: url('PROFİL AYARLARI');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_logout{
background-image: url('ÇIKIŞ YAP');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_login{
background-image: url('GİRİŞ YAP');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_message{
background-image: url('MESAJLAR');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_new_message{
background-image: url('YENİ MESAJ VAR');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_register{
background-image: url('KAYIT OL');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}

/*** Dj TuaL - Menü:Hover ***/
#i_icon_mini_index:hover{
background-image: url('ANASAYFA:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_calendar:hover{
background-image: url('TAKVİM:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_gallery:hover{
background-image: url('GALERİ:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_portal:hover{
background-image: url('PORTAL:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_faq:hover{
background-image: url('YARDIM:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_search:hover{
background-image: url('ARAMA:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_groups:hover{
background-image: url('KULLANICI GRUPLARI:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_members:hover{
background-image: url('ÜYE LİSTESİ:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_profile:hover{
background-image: url('PROFİL AYARLARI:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_logout:hover{
background-image: url('ÇIKIŞ:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_login:hover{
background-image: url('GİRİŞ:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_message:hover{
background-image: url('MESAJLAR:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_new_message:hover{
background-image: url('YENİ MESAJ VAR:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}
#i_icon_mini_register:hover{
background-image: url('KAYIT OL:hover');
width: px; /*** Resim Genişliği ***/
height: px; /*** Resim Yüksekliği ***/
}

/*** IB MENU ***/
#submenu ul li a {
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
#submenu ul li a:hover {
background-color:transparent;
}

noT:
/*** Dj TuaL - Menü ***/ bölümüne normal resim linkleri.
/*** Dj TuaL - Menü:Hover ***/ bölümüne mause ile üzerine gelince çıkacak resim linkleri.
/*** IB MENU ***/ bölümü ise INVISION forumlarda kullanılması tavsiye.
/*** Resim Genişliği ***/ kısmı resmin genişliği, sayı px ile bitişik yazılmalıdır.
/*** Resim Yüksekliği ***/ kısmı resmin yüksekliği, sayı px ile bitişik yazılmalıdır.

Örnek Kod AnaSayfa için;

Kod:

/*** Dj TuaL - Menü ***/
#i_icon_mini_index{
background-image: url('http://img27.imageshack.us/img27/6682/anasayfa.gif');
width: 50px; /*** Resim Genişliği ***/
height: 80px; /*** Resim Yüksekliği ***/
}

/*** Dj TuaL - Menü:Hover ***/
#i_icon_mini_index:hover{
background-image: url('http://img216.imageshack.us/img216/5980/anasayfa2.gif');
width: 50px; /*** Resim Genişliği ***/
height: 80px; /*** Resim Yüksekliği ***/
}

1.Normal hali.
2.Mause ile üzerine gelince olan hali.