küçük resim için arkaplan değiştirme

artiz oynununu oynamak için girdiğimde linkini vereceğim sitede görmüştüm. ana sayfada küçük resimlerin üzerine gelince demek istediğimi göreceksiniz.

http://www.toyoyun.com/

bende şu şekilde yaptım fakat değişmiyor resim bir türlü. ilk kenarlığı koyuyor faker hover çalışmıyor.

stil

.arka1{width: 140px; height: 106px; background: url(imaj/arka1.jpg) no-repeat; cursor:pointer; border: 0px;}
.arka1:hover{width: 140px; height: 106px; background: url(imaj/arka2.jpg) no-repeat; cursor:pointer;}

kod şöyle

<div class="arka1"><img src="resimler/1.jpg" alt=""/></div>

<img src="resimler/1.jpg" alt=""/>

bu resim ne resmi ? eni boyu kaç ?

arka plan değiştirmeye çalışıyorsun da;
ön plandaki 1.jpg arkadaki değişimi pek sallamaz önde kalmaya devam hani o açıdan soruyoum, eğer arka plan hover da değiştirmek istiyorsan amaç ne ki bu img nin o divin içerisinde olmasının ?

şimdi o divin içine koymamın sebebi, divin üzerine gelince arkaplan değişecek. o divin kenarlığıda, resmin kenarlığı gibi görünüyor. üzerine gelince de değişecek örnek verdiğim sitede ki gibi. resmin boyutu width: 136px; height: 102px;

şu 3 resmi görsem iyi olur aslında.

ama öncesinde:
içerdeki 1.jpg i o divin içine ortalarsan sorun çözülüyor mu bir dener misin? dışardaki arkaplan olan div normal içerdekinden daha büyük ve geniş tahmin ediyorum. haliyle içerideki resmi divin içine ortalarsan marginlerle, dive gelinceki hover arka plan resmini değiştirecek sende resim ortalı olduğu için etrafındaki değişimi görebileceksin. anlatabildim mi?

yok ilk resim görünüyor sadece hover yani üzerine gelince değişmiyor.

resimler böyle

1.jpg


arka1.jpg


arka2.jpg

css e şunu eklermisin:

.arka1 img { margin:2px;}

dosya isimleri vs. dogruysa css indeki çalışması lazım

ie 6 da çalışmaz tabi bu eğer ie6 da test ediyorsan

ie 6'da da çalışması için şöyle yapabilirsin:

a.arka1{width: 140px; height: 106px; background: url(arka1.jpg) no-repeat; border:0px; display:block}
a.arka1:hover{ background: url(arka2.jpg) no-repeat; }
a.arka1 img { margin:2px; border:0px;}

<a class="arka1" href="#bcn"><img src="1.jpg" alt=""/></a>