weeping guitar
http://effectortheme.tumblr.com/şu adreste fotoğrafların üzerine gelindiğinde sağ üst köşelerinde üç tane buton çıkması olayını kendi blogumda nasıl gerçekleştirebilirim? (temayı inceledim fakat karışık geldi, bir de nasıl üçünün aynı anda gözüktüğünü anlayamadım)basit bir şekilde anlatabilirseniz v
effectortheme.tumblr.com
şu adreste fotoğrafların üzerine gelindiğinde sağ üst köşelerinde üç tane buton çıkması olayını kendi blogumda nasıl gerçekleştirebilirim? (temayı inceledim fakat karışık geldi, bir de nasıl üçünün aynı anda gözüktüğünü anlayamadım)
basit bir şekilde anlatabilirseniz ve html/css'ye eklenecek kısımları da ayrı ayrı belirtebilirseniz (geriye sadece url ve koordinatları düzenlemek kalsa) çok mutlu olurum. şimdiden teşekkürler.
şu adreste fotoğrafların üzerine gelindiğinde sağ üst köşelerinde üç tane buton çıkması olayını kendi blogumda nasıl gerçekleştirebilirim? (temayı inceledim fakat karışık geldi, bir de nasıl üçünün aynı anda gözüktüğünü anlayamadım)
basit bir şekilde anlatabilirseniz ve html/css'ye eklenecek kısımları da ayrı ayrı belirtebilirseniz (geriye sadece url ve koordinatları düzenlemek kalsa) çok mutlu olurum. şimdiden teşekkürler.
0
css ve jquery ile.. wordpress i bilmiyorum nelere izin veriyor, gelişine yazıyorum:
head tag inin içine:
<script src="ajax.googleapis.com" type="text/javascript"></script>
<style>
#img { position:relative }
#img div { position:absolute;top:0;right:0;display:none }
</style>
body içine:
<div id="img">
<a href=""><img src="img.jpg" /></a>
<div>
<a href=""><img src="btn1.jpg" /></a>
<a href=""><img src="btn2.jpg" /></a>
<a href=""><img src="btn3.jpg" /></a>
</div>
</div>
<script>
$('#img').live('mouseover',function() {
$('#img div').show();
}).live('mouseout',function() {
$('#img div').hide();
});
</script>
head tag inin içine:
<script src="ajax.googleapis.com" type="text/javascript"></script>
<style>
#img { position:relative }
#img div { position:absolute;top:0;right:0;display:none }
</style>
body içine:
<div id="img">
<a href=""><img src="img.jpg" /></a>
<div>
<a href=""><img src="btn1.jpg" /></a>
<a href=""><img src="btn2.jpg" /></a>
<a href=""><img src="btn3.jpg" /></a>
</div>
</div>
<script>
$('#img').live('mouseover',function() {
$('#img div').show();
}).live('mouseout',function() {
$('#img div').hide();
});
</script>
0
evet büyük bir kısmını başardım fakat şöyle bir problem var, mouse sayfadaki fotoğraflardan birinin üzerindeyken tüm fotoğrafların üzerinde butonlar çıkıyor.
butonların sadece mouse'un o anda üzerinde olduğu fotoğrafta çıkmasını nasıl sağlayabilirim?
butonların sadece mouse'un o anda üzerinde olduğu fotoğrafta çıkmasını nasıl sağlayabilirim?
0
örnekteki fotoğraf yani img.jpg, img id li divin içinde.. body içindeki kodu kopyala yapıştır ile çoğaltıp sadece id yi değiştiricez, ona göre ikinci bir javascript fonksiyonu yazıcaz.. misal:
<div id="img2">
<a href=""><img src="img2.jpg" /></a>
<div>
<a href=""><img src="btn1.jpg" /></a>
<a href=""><img src="btn2.jpg" /></a>
<a href=""><img src="btn3.jpg" /></a>
</div>
</div>
<script>
$('#img2').live('mouseover',function() {
$('#img2 div').show();
}).live('mouseout',function() {
$('#img2 div').hide();
});
</script>
<div id="img2">
<a href=""><img src="img2.jpg" /></a>
<div>
<a href=""><img src="btn1.jpg" /></a>
<a href=""><img src="btn2.jpg" /></a>
<a href=""><img src="btn3.jpg" /></a>
</div>
</div>
<script>
$('#img2').live('mouseover',function() {
$('#img2 div').show();
}).live('mouseout',function() {
$('#img2 div').hide();
});
</script>
0
3 tane diyelim, scripti kısaltmak için biraz değiştiricez, style ı da:
<style>
#img, #img2, #img3 { position:relative }
#img div, #img2 div, #img3 div { position:absolute;top:0;right:0;display:none }
</style>
------------
<div id="img">
<a href=""><img src="images/g2.jpg" /></a>
<div>
<a href=""><img src="images/ok.png" /></a>
<a href=""><img src="images/ol.png" /></a>
<a href=""><img src="images/secure.png" /></a>
</div>
</div>
<div id="img2">
<a href=""><img src="images/r3.jpg" /></a>
<div>
<a href=""><img src="images/ok.png" /></a>
<a href=""><img src="images/ol.png" /></a>
<a href=""><img src="images/secure.png" /></a>
</div>
</div>
<div id="img3">
<a href=""><img src="images/r11.jpg" /></a>
<div>
<a href=""><img src="images/ok.png" /></a>
<a href=""><img src="images/ol.png" /></a>
<a href=""><img src="images/secure.png" /></a>
</div>
</div>
<script>
$('#img, #img2, #img3').live('mouseover',function() {
$('div',this).show();
}).live('mouseout',function() {
$('div',this).hide();
});
</script>
<style>
#img, #img2, #img3 { position:relative }
#img div, #img2 div, #img3 div { position:absolute;top:0;right:0;display:none }
</style>
------------
<div id="img">
<a href=""><img src="images/g2.jpg" /></a>
<div>
<a href=""><img src="images/ok.png" /></a>
<a href=""><img src="images/ol.png" /></a>
<a href=""><img src="images/secure.png" /></a>
</div>
</div>
<div id="img2">
<a href=""><img src="images/r3.jpg" /></a>
<div>
<a href=""><img src="images/ok.png" /></a>
<a href=""><img src="images/ol.png" /></a>
<a href=""><img src="images/secure.png" /></a>
</div>
</div>
<div id="img3">
<a href=""><img src="images/r11.jpg" /></a>
<div>
<a href=""><img src="images/ok.png" /></a>
<a href=""><img src="images/ol.png" /></a>
<a href=""><img src="images/secure.png" /></a>
</div>
</div>
<script>
$('#img, #img2, #img3').live('mouseover',function() {
$('div',this).show();
}).live('mouseout',function() {
$('div',this).hide();
});
</script>
0
şimdi tumblr sayfamda aynı anda 15 tane fotoğraf var ve fotoğrafların tek tek adlarını değil de sınıfını yazabiliyorum sanırım, çünkü "img.jpg" kısmına "PhotoUrl-250" geliyor. Bu şekilde gidersek bundan 15 tane kopyala yapıştır yaptığımda "PhotoUrl-250" sabit kalacağından durum değişir mi bilmem ama yine de deneyeyim.
bir de jquery'de "this" diye bir anahtar varmış galiba, o işe yarar mı burada? evetse nereye, nasıl yazmam lazım onu?
bir de jquery'de "this" diye bir anahtar varmış galiba, o işe yarar mı burada? evetse nereye, nasıl yazmam lazım onu?
0
