bu yapılabilir mi acaba css'de?
onMouseOver event'ı için aşağıdaki sayfadaki ikinci imaj örneğine bakabilirsiniz:
www.w3schools.com
evet yararlı şeyler öğrenmiş oldum fakat henüz tam olarak aradığımı bulmuş değilim, linkteki olay transparency ile ilgili, üstüne gelindiğinde resmin transparency değerini artırıyor. (bu yapılabildiğine göre negatif de yapmak mümkündür herhalde, biraz daha araştırayım en iyisi)
css'e gerek yok ki burda, istersen onu da yazayim ama en kolay yolu $u.
<img src="test.jpg" name="test" onmouseover="document.test.src='test2.jpg';" onmouseout="document.test.src='test.jpg';" />
bu ilk yolu.
css ile yapmak istersen, bir nesneye background-image olarak ilkini tanimlaman gerekir. uzerine gelince de ikincisi cikacak.
.class {
background: url('test.jpg') no-repeat top;
}
.class:hover {
background: url('test2.jpg') no-repeat top;
}
$eklinde. ie6 yanli$ hatirlamiyorsam sorun cikarabiliyor direkt hover eventlerinde. o yuzden derim ki ilkini kullanman daha sagliklidir.
assert h, css ile birşeyler yaptım, firefox'ta düzgün gösteriliyor ama ie7 kabul etmiyor -> www.georgeharrison.deviantart.com
<img src="test.jpg" name="test" onmouseover="document.test.src='test2.jpg';" onmouseout="document.test.src='test.jpg';" />
yukarıdaki satırı sanırım yanlış uyguladım ya da bu komutu deviantart kabul etmiyor. "document.test.src" kısmını nasıl doldurmam gerekiyor? test.jpg ve test2.jpg resimlerin url'leri ama orasını anlamadım.
edit : pek anlamam ama sanırım yukarıdaki satır java dilinde, deviantart java destekliyor mu bilemiyorum.
senin yaptigin css ile. benim verdigim img kodu ile alakasi yok. onu kullanmami$sin gordugum kadari ile.
deviantart kisitliyor olabilir.
tamamen css cali$acaksan sana daha saglikli bir yol onerebilirim.
$oyle.
style tanimlamalari:
.holder {
background-repeat: none;
display: block;
}
.holder span {
display: none;
}
#img1 {
background-image: url('test.jpg');
}
#img1:hover {
background-image: url('test2.jpg');
}
/* #img2 falan diye artirman mumkun burda
dosyalara google.com $eklinde ula$man da mumkun */
html kisminda ise:
<a href="www.google.com" class="holder" id="img1"><span>img1</span></a>
bu $ekilde sorunsuz cali$ir browser'larda. hem image'lara da link vermi$ olursun.
ya da istersen div olarak tanimlaman da mumkun her birini. o sana kaliyor.
"span" takısı malesef deviantart ile uyumsuz.
o zaman, <strong> ya da <b> ya da <em> ya da <i> gibi $eyler kullanabilirsin.
.holder b {
}
$eklinde degi$tirmen gerekir sadece.
holder'ın (veya herhangi bir kelimenin) kapsayıcı bir küme oluşturabilmesi için altındaki kelimelerin (burada img1,img2 vs.) hepsinin başına "#" gelmek zorunda değil mi? ben ilk denemede hata verdiği için "#"ları "." ile değiştirmiştim. bir saattir problemin nerede olduğunu anlamaya çalışıyorum, problem bu galiba. yani sonuç olarak deviantart bu yolla da uyumsuz (kıl deviantart)
.holder <-- class
#img1 <-- id
<span> uymasa bile <font class="x"> ile rahatlıkla css'ten class çağırabilirsin ki.
font.myfont {
font-family: verdana;
font-size: 13 px;
}
vb., vb. bu girdiyi kimse görmeyecek ama. dursun kenarda.