[]
CSS ile ilgili başka bir soru
bir resmin normalde negatifinin, mouse ile üzerine gelindiğinde ise normal halinin görünmesini istiyorum (burada negatifliği sağlayacak olan bir kod da olabilir, resmin kendisi ve negatifi olmak üzere iki imaj da upload edilebilir)
bu yapılabilir mi acaba css'de?
bu yapılabilir mi acaba css'de?
- archetype
(22.07.08 16:32:54)
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)
- weeping guitar (22.07.08 17:41:43)
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.
<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.
- sourlemonade (22.07.08 17:50:38)
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.
<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.
- weeping guitar (22.07.08 19:26:06 ~ 19:44:23)
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.
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.
- sourlemonade (22.07.08 19:39:39 ~ 19:45:17)
"span" takısı malesef deviantart ile uyumsuz.
- weeping guitar (22.07.08 20:58:26)
o zaman, <strong> ya da <b> ya da <em> ya da <i> gibi $eyler kullanabilirsin.
.holder b {
}
$eklinde degi$tirmen gerekir sadece.
.holder b {
}
$eklinde degi$tirmen gerekir sadece.
- sourlemonade (22.07.08 21:12:11 ~ 21:12:30)
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)
- weeping guitar (22.07.08 22:03:44)
.holder <-- class
#img1 <-- id
#img1 <-- id
- sourlemonade (23.07.08 07:54:24)
<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.
font.myfont {
font-family: verdana;
font-size: 13 px;
}
vb., vb. bu girdiyi kimse görmeyecek ama. dursun kenarda.
- archetype (07.08.08 12:37:53)
1
