Cızımleri buton haline donusturmek

webdizaynsan · 1 May 2012

merhabalar arkadaşlar bir şey danışacaktım sizlere,
elimde çizmiş olduğum bir çok buton örnekleri var fakat bunları üzerine gelince değişen buton haline çeviremiyorum dreamweaver da Insert yolu üzerinden yapılıyor fakat düzgün değil javascript gibi düzgün olsun istiyorum bunun için hazırlamış olduğum çizimleri javascript a dönüştürebileceğim bir program veyahut sorunsuz sitede çalışacak bir kod biliyormusunuz ? işimi saydamlıkta görebilir tabi öyle bir şey varsa üzerine gelindiğinde buton saydamlaşsın oda olur. şimdiden tşk.

A.Volkan ÖZER · 1 May 2012

Javascript'e gerek yok. CSS ile yapabilirsiniz. Örneğin resim 120px * 35px . text-indent kullandığınızda link yazısı butonun üzerinde görünmeyecektir.

<style type="text/css">
a {
background:url(buton.jpg) no-repeat center;
width:120px;
height:35px;
display:block;
text-indent:-9999px; /* Eğer buton resmi "Anasayfa" vb yazılı değil ise bunu kullanıyoruz. Bunu kullandığımızda Link yazısı resim üstünde görünmez... */
}

a:hover {
background:url(buton2.jpg) no-repeat; /* Mouse üzerine geldiğinde görünecek buton resimi */
}
</style>

<a title="anasayfa" href="anasayfa.html">Anasayfa</a>

max1299 · 1 May 2012

yazıları kaldırmak için arkadaşımızın önerisini bende kullanıyorum
butonu üzeridne gelince hover efekti uygulamak için bir yol
------------------------------------

mesela html kodu

<a class="buton" href="#">Anasayfa</a>
------------------------------------
Css ile
.buton:hover{opacity:0.1}
opacity değeri 0.1 - 0.2 ... - 0.9 - 1 gibi değerler alır
-------------------------------------
jquery ile

$(document).ready(function(){
$(".buton").hover(function(){$(this).animate({"opacity" : "0.3"},500)},
function(){$(this).animate({"opacity" : "1"},500)});

});

şeklinde olabilir

tabi jQuery kütüphanesini eklemen lazım

webdizaynsan · 3 May 2012

A.Volkan ÖZER' Alıntı:
Javascript'e gerek yok. CSS ile yapabilirsiniz. Örneğin resim 120px * 35px . text-indent kullandığınızda link yazısı butonun üzerinde görünmeyecektir.

<style type="text/css">
a {
background:url(buton.jpg) no-repeat center;
width:120px;
height:35px;
display:block;
text-indent:-9999px; /* Eğer buton resmi "Anasayfa" vb yazılı değil ise bunu kullanıyoruz. Bunu kullandığımızda Link yazısı resim üstünde görünmez... */
}

a:hover {
background:url(buton2.jpg) no-repeat; /* Mouse üzerine geldiğinde görünecek buton resimi */
}
</style>

<a title="anasayfa" href="anasayfa.html">Anasayfa</a>

teşekkürler ederim

webdizaynsan · 3 May 2012

max1299' Alıntı:
yazıları kaldırmak için arkadaşımızın önerisini bende kullanıyorum
butonu üzeridne gelince hover efekti uygulamak için bir yol
------------------------------------

mesela html kodu

<a class="buton" href="#">Anasayfa</a>
------------------------------------
Css ile
.buton:hover{opacity:0.1}
opacity değeri 0.1 - 0.2 ... - 0.9 - 1 gibi değerler alır
-------------------------------------
jquery ile

$(document).ready(function(){
$(".buton").hover(function(){$(this).animate({"opacity" : "0.3"},500)},
function(){$(this).animate({"opacity" : "1"},500)});

});

şeklinde olabilir

tabi jQuery kütüphanesini eklemen lazım

jQuery kütüphanesini indirdim yalnız kuramadım virüsden dolayı bilgilendirdiğiniz için teşekkürler

A.Volkan ÖZER · 3 May 2012

webdizaynsan' Alıntı:
jQuery kütüphanesini indirdim yalnız kuramadım virüsden dolayı bilgilendirdiğiniz için teşekkürler

kütüphaneyi kurman gerekmiyor.

Kod:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Bunu<head></head> arasında bir yere yazman yeterli. Kütüphane kullanıma hazır hale gelecektir.

max1299 · 4 May 2012

evet kütüphane exe uzantılı bir setup programı gibi değil sadece .js uzantılı bir javascript dosyası volkan arkadaşımızn dediği gibi head tagları içerisine yazılır

	Benzer konular	Forum		Tarih
	Hareketli template ve sosyal medya butonları yükleme-kullanma \\ mogrt \\	Premiere Pro	661	29 Eyl 2020
	Youtube Abone Ol Butonu Ekleme 2020	Video Dersleri	500	19 Haz 2020
	VSDC ile abone ol butonu yapma	Video Dersleri	524	1 Eki 2018
	Youtube Abone ol butonu yapımı	Video Dersleri	623	30 Eyl 2018
	Camtasia ile Youtube Abone Ol Butonu yapma	Video Dersleri	587	29 Eyl 2018
	wındows 10 başlat, arama,internet butonları çalışmıyor	Microsoft Office PowerPoint	2K	26 Ocak 2018
	Corel Draw dersleri (buton yapımı)	Corel Draw	2K	2 Ara 2016
E	52-Php Dersleri -Php sayfalama yapımı, Php pagination yapımı, Dinamik Sayfalama butonları yapımı	Php, Asp, Perl, Html	3K	16 Kas 2016

Cızımleri buton haline donusturmek

Benzer konular