Orijinalini görmek için tıklayınız : ÇÖZÜLDÜ siyah beyaz modül üzerine gelince renkli
İ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?
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)
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 :(
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))
vBulletin v4.2.1, Copyright ©2000-2024, Jelsoft Enterprises Ltd.