üzerine gelince değişen ve büyüyen resim

hamdikucuk · **üzerine gelince değişen ve büyüyen resim -** 11.04.2007, 13:44

arkadaşlar şöyle bir şey yapmak istiyorum...
sayfada ürün resimleri var.. resimlerin üzerine mause ile geldiğimde dosyadaki aynı resmin daha büyük olanın gelmesini istiyorum.mouse yi çekince normal haline dönsün. css ile yapılan bir örnek buldum fakat css bilgim zayıf olduğu için sayfama uyarlayamadım. bunu html kodları veya js ile nasıl yapabilirim.yardımcı olursanız sevinirim..
kolay gelsin... iyi çalışmalar.

samterk · 11.04.2007, 14:33

Onu bulamadım ama şimdilik şu fare imlecini takip eden yazı var. Belki bu da hoşuna gider. Bulursam istediğini de eklerim. Şu linkte kodlar:
http://www.htmlbasix.com/mousetrails.shtml

SenAtor · 11.04.2007, 15:06

onu en iyi flash la button şeklinde yaparsın çok zor olmaz ayrıca...

samterk · 12.04.2007, 02:38

Image Ready kullanıyorsan, onunla yapabilirsin sanırım. Yeni aklıma geldi bu yöntem. http://www.pikselfx.com/dersler/rollover.htm bu linkte rollover kullanmayı anlatıyor. Ancak sen bu bilgiler ışığında farklı bir uygulama yapacaksın. Buton değil, istediğin resimden bir kopya alacaksın. Sonra bunun rengini değil de boyutunu değiştireceksin.

Ben butonu yapmıştım, resmi denemedim ama bu mantıkla yapılacağını düşünüyorum.

gadfLy · 12.04.2007, 17:20

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm orjinali bu adreste. Resmin uzerine tiklayinca buyugunu gosteriyor. Ben sizin dediginiz gibi mouse uzerine gelince resmi gosterecek sekilde duzenleyip bazi yerlerinide Turkce'lestirdim. Yeni halini http://www.kuzeniz.biz/gadfly/ adresinde gorebilirsiniz. Gereken duzenlenmis dosyalari,

JavaScript dosyasi: http://www.kuzeniz.biz/gadfly/thumbnailviewer.js
Css Dosyasi : http://www.kuzeniz.biz/gadfly/thumbnailviewer.css
Yukleniyor resmi : http://www.kuzeniz.biz/gadfly/loading.gif

adreslerinden alabilirsiniz. Sizin yapmaniz gereken bu dosyalari indirdikten sonra;

Kod:

<html>
<head>
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
<script src="thumbnailviewer.js" type="text/javascript"></script>
  <title></title>
</head>
<body>
<table border="0">
  <tr>
     <td><a href="frog_pointing_big.jpg" rel="thumbnail" title="Buraya Resimin Aciklamasi Gelecek!"><img src="frog_pointing_small.jpg" width="100" height="126" alt="" border="1" align="center" /></a></td>
     <td><a href="frog_popping_big.jpg" rel="thumbnail" title="Buraya Resimin Aciklamasi Gelecek!"><img src="frog_popping_small.jpg" width="100" height="86" alt="" border="1" align="center" /></a></td>
     <td><a href="grenouille.jpg" rel="thumbnail" title="Buraya Resimin Aciklamasi Gelecek!"><img src="grenouille_small.jpg" width="100" height="133" alt="" border="1" align="center" /></a></td>
  </tr>
</table>

</body>
</html>

benzeri bir html sayfasi hazirlayip, <a> tagindaki "href" kismina resmin buyuk halini <img> tagindaki "src" kismina ise resmin kucuk hali olacak sekilde, kendi resimlerinizle degistirip duzenlemek.