filatros
Aktif Üye
- Mesajlar
- 200
CSS ile resim değiştirme sorusu!
- Konbuyu başlatan filatros
- Başlangıç tarihi
- Mesajlar
- 4,630
Sayın hocam, html kodlarınızı eklerseniz yardımcı olabiliriz. Ayrıca resimleriniz tek bir resim şeklinde mi yoksa ayrı iki resim mi var?
http://www.fatihhayrioglu.com/css-ile-m ... i-menuler/ adresini ve sitedeki diğer css derslerini incelemenizi tavsiye ederim.
http://www.fatihhayrioglu.com/css-ile-m ... i-menuler/ adresini ve sitedeki diğer css derslerini incelemenizi tavsiye ederim.
filatros
Aktif Üye
- Mesajlar
- 200
yakup hocam ben mahmut hoca, niğde ticarettten öncelikle saygılar 
Resimleri yan yana yerleştirdim ve fareyi linkin üzerine alınca resim x koordinatında kayacak. fatih hayrioğlunu inceledim ama istediğim gibi bulamadım.
sorun şurada ki yazının üzerine gelince başka bir div etiketine eklediğim resmi kaydırmam gerekiyor. Şunu denedim olmadı:
css kodları:
html koları
Resimleri yan yana yerleştirdim ve fareyi linkin üzerine alınca resim x koordinatında kayacak. fatih hayrioğlunu inceledim ama istediğim gibi bulamadım.
sorun şurada ki yazının üzerine gelince başka bir div etiketine eklediğim resmi kaydırmam gerekiyor. Şunu denedim olmadı:
css kodları:
Kod:
<style type="text/css">
.home{
height:200px;
width:225px;
overflow:hidden;
background-image:url(home.png);
background-position:0px 0px;
}
a:hover .home{
background-position:100px 100px;
}
</style>
Kod:
<body>
<div class="home"></div>
<p><a href="#">ANA SAYFA</a></p>
</body>
- Mesajlar
- 4,630
Mahmut hocam, senin istediğini css ile yapmak mümkün değil. Yani linkin üzerine gelindiğinde başka bir elemendin (divin) arkaplanını değiştiremezsin. Bunun için Javascript kullanman gerekir. Yapmak istediğin eğer yatay, resimli menü yapmak ise, ul etiketi ile sırasız bir liste oluşturur, liste elemanı olarak linklerini koyar ve ardından bu linklere css uygularsın. Fatih hayrioğlunun sitesinden verdiğim link tam da bunu anlatıyor.
- Mesajlar
- 909
yakuphan' Alıntı:
z-index kullanılarak yapılmaz bu çözüm.
css sprite image özelliği kullanılır. Bu özellikte Http request sayısının azalmasını sağlar ve uzun zamandır yaygın olarak kullanılır.
Kod:
#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}