Forum
Aktif konular
Üyeler
Kurallar
Arama
CSS Menü Kodlamak (Html) [Yardım] CSS Menü Kodlamak (Html) [Yardım]
-
Sevgili arkadaşlarım.
Önceleri çok güzel, çok özgün css butonlar kodlarken; yaklaşık bir sene kadar bu uğraşlarımı terk ettiğim için bildiğim çoğu şeyi unuttum. Her ne kadar hatırlamaya çalışsam da hatırlayamıyorum. Sizden küçük bir yardım istiyorum.
Elimde size örnek olarak sunacağım iki adet resim var (internetten buldum boyutları eş olmayabilir)
Bağlantı olarak duracak olan buton :
Bu ikinci resim ise, ziyaretçinin bu buton üzerine maus imlecini getirdiğinde buton yansıyacağı şekil =
Hocam şimdi bunu css buton olarak kodlayabilecek bir arkadaş var mı? Ya da başka bir css butonu düzenleyerek bu hale dönüştürebilecek? Ve üstüne bağlantı (link) ekleyebilecek bir mürit?
Anlatmak istediklerimi anlattım inşallah.
Normalde buton görüldüğü gibi yeşil; ama ziyaretçi maus imlecini bu butonun üzerine getirdiğinde ikinci resimdeki gibi olacak. Tıkladığında bağlantıya gidecek?
Hatırlatmak ya da baştan kodlayıp paylaşmak isteyen müritlerin yardımlarını sabırsızlıkla beklemekteyim.
-
Wordpress style dosyasından menuye ait css kodlarına bakarak birseyler hatırlarsın blki.. Dediklerinin aynısı vr istersen bnm style dosyasına bak aynısı var :)
-
http://www.dynamicdrive.com/dynamicindex15/index.html
dom rollover'lar istedigin seyi yapiyor
-
<--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#resimMenu
{
background-repeat:no-repeat;
height:65px;
width:200px;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('resim2.png')">
<div id="resimMenu"><a href="http://www.google.com.tr" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','resim2.png',1)"><img src="resim1.png" name="Image1" width="189" height="68" border="0" id="Image1" /></a>
</div>
</body>
</html>-->
-
hocam yukardaki yazdıımı notepade yazıp bi klasöre kaydedersen .html diye ve aynı klasöre resim1 ve resim2 diye iki tane görsel atarsan resim1 normalde görünen resim olcak resim 2 maus üzerine geldiinde görünen resim olcak..
-
js ile yaptım istediğin gibi sanırım
<a href="http://www.google.com.tr">
<img src="resim1.png" onmouseout="this.src='resim1.png'" onmouseover="this.src='resim2.png'" />
</a>
-
Arkadaşlar çok teşekkür ediyorum.
@CEO senin yaptığın işe yaradı ben biraz bu kodların üzerinde kendi bilgilerimi kullanmaya başlarım dostum teşekkür ederim.
Ayrıca; Slient_King ve 7-19'a da teşekkür ediyorum.
@ 7-19 kardeşim verdiğin siteden pek bir şey anlamadım ama kurcalayacağım. Boş zamanlarımda verdiğin adrese girer girer bakarım teşekkür ederim.
@Cemnet hocam kodlarından bir şey anlayamadım. CSS mi bu html ama sanki kod eksik gibi; ama yine de teşekkür ederim CEO kardeşimin verdiği kodlar çalışıyor. Herkese teşekkür ediyorum.
-
eyw hocam kolay gelsin :)
-
Paragrafi bunu yazdı:
-----------------------------
Arkadaşlar çok teşekkür ediyorum.
@CEO senin yaptığın işe yaradı ben biraz bu kodların üzerinde kendi bilgilerimi kullanmaya başlarım dostum teşekkür ederim.
Ayrıca; Slient_King ve 7-19'a da teşekkür ediyorum.
@ 7-19 kardeşim verdiğin siteden pek bir şey anlamadım ama kurcalayacağım. Boş zamanlarımda verdiğin adrese girer girer bakarım teşekkür ederim.
@Cemnet hocam kodlarından bir şey anlayamadım. CSS mi bu html ama sanki kod eksik gibi; ama yine de teşekkür ederim CEO kardeşimin verdiği kodlar çalışıyor. Herkese teşekkür ediyorum.
-----------------------------cemmet kardesimin verdiği kodlar js dostum java script die biliyorum :))
-
javascript ile yazdım aslında basit ve anlaşılır gibi ama sorununu hallettiysen eğer nema problema for me :F
edit : evet doğru biliyosun @Silent_King :)
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="tr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.menu li
{
background-image:url('menu1.png');
background-repeat:no-repeat;
background-position: left top;
list-style-type:none;
height:68px;
line-height:68px;
width:189px;
}
.menu li:hover
{
background-image:url('menu12.png');
background-repeat:no-repeat;
background-position: left top;
list-style-type:none;
height:68px;
line-height:68px;
width:189px;
}
.menu li a:link,a:active,a:visited
{
text-decoration:none;
line-height:68px;
display:block;
font-family:Tahoma
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="index.html"> </a></li>
</ul>
</body>
</html>
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla