PDA

Orijinalini görmek için tıklayınız : ÇÖZÜLDÜ siyah beyaz modül üzerine gelince renkli



seri_ac
09-03-2012, 18:28
İyi günler
html müdüle yazı ve resim ekleyeceğim mause ile üzerine geldiğinde modül içeri renkli olacak mouse geri çektiğimizde siyah beyaz olacak..
yada adresteki (http://www.dogusgrubu.com.tr/web/3-25-1-1/dogus_grubu_-_tr/genel/navigation/sektorler) gibi bişeyler olabilir..
örnek verdiğim adrestekiler js kodları ile yapılmış sanırım benim işimi daha basitide görebilir.
Nasıl yapabilirm?

Ümit
09-03-2012, 23:41
CSS Hover
JS onmouseover
http://spyrestudios.com/html5-canvas-image-effects-black-white/
Animate on hover - Joomla! Extensions Directory (http://extensions.joomla.org/extensions/photos-a-images/images/image-modules/13795)

Macit
10-03-2012, 04:14
Ufak bir örnek ve kaynağını veriyorum,

<img src="img/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg flt">
<ul class="menu flt">
<li class="current_page_item"><a href="#">Ana Sayfa</a></li>
<li class=""><a href="#" title="About">Hakkımızda</a></li>
<li class=""><a href="#" title="Work">Projeler</a></li>
<li class=""><a href="#" title="Contact">Referanslar</a></li>
<li class=""><a href="#" title="Location">İletişim</a></li>
<li class=""><a href="http://www.cssornekleri.com" title="13 Styles">CSS Örnekleri</a></li>
</ul>
</div>
<img src="img/bot.jpg" width="202" height="3" alt="" class="bot flt" />


/* CSS Document */
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#6FA9C7; width:202px;}
.menu{float:left; clear:left; font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
list-style:none;
}
.menu a, .menu a:visited {
width:186px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#cbe7f5;
text-decoration:none;
background:url(../img/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
*html .menu a, .menu a:visited {
width:186px;
height:22px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#cbe7f5;
text-decoration:none;
background:url(../img/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited {
background:url(../img/menubg1.jpg) no-repeat;
text-decoration:none;
}
.bot{clear:left;}

Kaynak : Buradan (http://www.cssornekleri.com/menu/detay/16)

olkunmustafa
13-03-2012, 01:37
CSS Hover
JS onmouseover
http://spyrestudios.com/html5-canvas-image-effects-black-white/
Animate on hover - Joomla! Extensions Directory (http://extensions.joomla.org/extensions/photos-a-images/images/image-modules/13795)


joomla 1.7 ile çalışmıyor mu :(

Ümit
15-03-2012, 19:36
joomla 1.7 ile çalışmıyor mu :(

JoomShaper Image Gallery (http://demo.joomshaper.com/extensions/free-extensions/image-gallery.html) (indir (http://extensions.joomla.org/extensions/photos-a-images/photo-gallery/13173))