Cızımleri buton haline donusturmek

Web Tasarımı - Cızımleri buton haline donusturmek ...

Cevapla
Cızımleri buton haline donusturmek
webdizaynsan isimli Üye şimdilik offline konumundadır

webdizaynsan

Grafiker / Zonguldak

Standart

Cızımleri buton haline donusturmek

Alt 01-05-2012 #1
Sponsorlu Bağlantılar

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.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

A.Volkan ÖZER isimli Üye şimdilik offline konumundadır

A.Volkan ÖZER(35)

Webmaster / Ankara

Standart
Alt 01-05-2012 #2
                             Sponsorlu Bağlantılar
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>
Bu mesajdan alıntı yap
max1299 isimli Üye şimdilik offline konumundadır

max1299

Webmaster / İstanbul

Standart
Alt 01-05-2012 #3
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({"opa city" : "0.3"},500)},
function(){$(this).animate({"opacity" : "1"},500)});

});

şeklinde olabilir

tabi jQuery kütüphanesini eklemen lazım
Bu mesajdan alıntı yap
webdizaynsan isimli Üye şimdilik offline konumundadır

webdizaynsan

Grafiker / Zonguldak

Standart
Alt 03-05-2012 #4
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
Bu mesajdan alıntı yap
webdizaynsan isimli Üye şimdilik offline konumundadır

webdizaynsan

Grafiker / Zonguldak

Standart
Alt 03-05-2012 #5
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({"opa city" : "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
Bu mesajdan alıntı yap
A.Volkan ÖZER isimli Üye şimdilik offline konumundadır

A.Volkan ÖZER(35)

Webmaster / Ankara

Standart
Alt 03-05-2012 #6
jQuery kütüphanesini indirdim yalnız kuramadım virüsden dolayı bilgilendirdiğiniz için teşekkürler
kütüphaneyi kurman gerekmiyor.

 <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.
Bu mesajdan alıntı yap
max1299 isimli Üye şimdilik offline konumundadır

max1299

Webmaster / İstanbul

Standart
Alt 04-05-2012 #7
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
Bu mesajdan alıntı yap
Cevapla

Tags
buton, button, program, script

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
gazeteyi pdf haline renkli çevirme AcemiMizanpaj QuarkXPress 2 10-10-2010 16:59:51
index haline dönüştürülmüş .... siyasal-kaos Photoshop Soru ve Sorunlarınız 0 09-03-2010 13:56:01
flash 8 de buton içinde buton neden çalışmıyor fmelih- Flash 3 25-12-2009 19:51:22
Resimlerinizi Küp Haline Dönüştürme Angelsmone Photoshop Dersleri 29 10-11-2009 12:01:02
Kartonaj Ve Ambalaj Terİmleri Gökhan TEKİN Grafik Sözlük 1 08-04-2008 16:36:34

Kapat
Şifremi Unuttum?