| Yazar |
Mesaj |
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
 09.11.2008, 15:34 (UTC)
Mesaj konusu: "Çek-Bırak" Özellikle Nesneler Oluşturmak (rozet) |
|
|
“Çek-Bırak” özellikli nesneler oluşturmak
"Çek-Bırak" özellikle nesneler tarafımızdan oluşturulmuştur. Bunun nasıl yapıldığını sizinle paylaşıyoruz. Eğer bunun kodunu ve ya kendinize göre yapmanızı istiyorsanız bu dersimiz tam size göre. Bu nesnenin hazırlanmasında tam 3 kod tipi kullanılmaktadır. HTML-CSS-JS. Kodların hepsi dosyalara yüklenmiştir. O yüzden kod çok küçük gözüküyor. Fakat küçük kodun içindeki adrese bakarsanız kodun ne kadar uzun olduğunu göre bilirsiniz. CSS bölümünde resimde değişiklik yapmak isterseniz diye kodun içerği gösterilmiştir. Kodda bir problem oluşursa bize bildiriniz.
Şimdi aşağıdaki adımları takip ederek bu işlemi yapmaya başlayalım:
Html kodlaması
Css ile biçimlendirme ve konumlandırma
JavaScript ile nesneye hareket kazandırma
1. HTML kodlaması
İlk adımda nesnenin HTML koduna bakalım. Bu küçük kodda hiç bir değişiklik yapmayınız. Yaparsanız kod çalışmaz. CSS ve JS uygulamaları yaptıktan sonra nesne gözükmez. Nesnenin sitede görünmesini sağlayan kod budur. Eğer CSS uygulamayı yapmazsanız resmin url adreside olamayacağından gözükmez. JS işlemlerini yapmazsanız nesne sitede gözüktüğü gibi durur. Fakat hareket edemez.
Not: Nesneyi kaç tane yapmak isterseniz yukarıdakı kodu o kadar yazınız.
2. CSS ile biçimlendirme ve konumlandırma
Şimdi 2-ci aşamadayız. Aşağıdakı CSS kodları tarafımızdan hazırlanmıştır. Bu kod olmazsa hareket ve görünüm de olmaz. Aşağıdakı kodumuz "rozet" nesnesinin nerede durucağını ve görüntüsünü belirtmektedir. Hazırladığımız bu kodu da sitenizin "tasarım ayarlarından" istenilen bir kutucuğa koymanız yeterli olucaktır.
Kod: <link rel="stylesheet" href="http://site.mynet.com/webmaster_sir/CSS/rozet.css" type="text/css" media="screen" />
CSS ile nesneyi biçimlendirme
CSS ile nesneyi biçimlendire bilirsiniz. Yani görüntüsünü değişe bilirsiniz. Bunun için öncelikle aşağıda yazılmış linke bakalım:
Kod: http://site.mynet.com/webmaster_sir/CSS/rozet.css
Şimdiyse yukarıdakı linkin içindeki koda bakalım:
Kod: <style>
#rozet
{background:url([color=green]http://site.mynet.com/webmaster_sir/RESIMLER/rozet.png[/color]) 0 0 no-repeat;
height:76px;
left:-38px;
position:absolute;
text-indent:-99999px;
top:22px;
width:77px}
</style>
Şimdi kodda yeşil renk ile gösterilmiş adrese bakalım. O resim adresinin yerine istenilen bir resim adresi yaza bilirsiniz. Bu kodu gösterdiğimiz ilk kodu EKLEMEMEK şartıyla ekleye bilirsiniz. Ayrıca bu kodda kırmızıyla gösterilmiş "rozet" kelimesi de vardır. Onu istenilen bir yazıya çevire bilirsiniz. Ama nesnenin çalışması için onu hangi kelimeyle değişirsen "1. HTML kodlaması" bölümünde kırmızı renkle gösterilmiş "rozet" kelimesini de değişeceğiniz sözle değişmeniz lazım.
3. JavaScript ile nesneye hareket kazandırma
Şimdi sıra geldi 3-cü aşamaya. JavaScript ile nesnemize hareket kazandırmaya. Hareket kazandırmak için günlerce üzerinde çalıştığımız JavaScript kodu aşağıdadır. HTML ve CSS işlemleri yapınca nesne gözükür. Fakat hareket edemez. JS kodunu koymanız mutlaka lazım.
Kod: <script type="text/javascript" src="http://site.mynet.com/webmaster_sir/JS/rozet.js"></script>
Değişim yapmadan sitemizde gözüktüğü gibi hazır kodumuz:
Kod: <div id="rozet">
<link rel="stylesheet" href="http://site.mynet.com/webmaster_sir/CSS/rozet.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://site.mynet.com/webmaster_sir/JS/rozet.js"></script> |
|
|
↑
|
|
 |
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
09.11.2008, 16:28 (UTC)
Mesaj konusu: |
|
|
|
|
|
↑
|
|
|
-
bilgiliyiznet
Uzman Üye
|
09.11.2008, 16:37 (UTC)
Mesaj konusu: |
|
|
Paylaşım için teşekkürler  ______________  |
|
|
↑
|
|
|
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
09.11.2008, 16:45 (UTC)
Mesaj konusu: |
|
|
bilgiliyiznet yazmış: Paylaşım için teşekkürler |
|
|
↑
|
|
|
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
09.11.2008, 17:20 (UTC)
Mesaj konusu: |
|
|
|
|
|
↑
|
|
|
-
ckpweb
Bedava-Sitem Bağımlısı
|
10.11.2008, 15:50 (UTC)
Mesaj konusu: |
|
|
Çok güzel olmuş da biyere götürüyorum farede tuşu bıraktığım anda hemen eski yerine dönüyor ,benden korktu galiba  ______________ http://webninjasi.tr.gg |
|
|
↑
|
|
|
-
htmlkodtakimi
Acemi Üye
|
10.11.2008, 17:10 (UTC)
Mesaj konusu: |
|
|
webmaster-sir yazmış: Beyenen yok galiba. 
Emek verdik hazırladık.
Bi yorum yazsanız..
Merhaba;
Paylasimin için Cok Sağol Kardeş Ellerine Sağlık.. ______________  |
|
|
↑
|
|
|
-
media-turk
Uzman Üye
Konum: Denizli
|
12.11.2008, 19:47 (UTC)
Mesaj konusu: |
|
|
Mükkeemmmelll  |
|
|
↑
|
|
|
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
15.11.2008, 09:23 (UTC)
Mesaj konusu: |
|
|
|
|
|
↑
|
|
|
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
15.11.2008, 09:25 (UTC)
Mesaj konusu: |
|
|
ckpweb yazmış: Çok güzel olmuş da biyere götürüyorum farede tuşu bıraktığım anda hemen eski yerine dönüyor ,benden korktu galiba
Merhaba,
Evet öğle.
Bıraktığınız zaman eski yerine döner.
Fakat 10 saniye gibi bırakmadan hareket ettirirseniz farenin üzerinde kalır.
Bi kere daha tıklarsak da eski yerine döner.
Geriye dönüşde biraz titreyiş olmasınıda .js türlü dosyaya yükledim.
Böğle daha iyi olduğunu düşünüyorum.
İyi eğlenceler. ______________  Ready for emergency ? Anlatılmaz, yaşanır. Bedava-sitemde olmayan yüzlerce servisden ücretsiz faydalanabilirsiniz. |
|
|
↑
|
|
|
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
18.11.2008, 13:51 (UTC)
Mesaj konusu: |
|
|
|
|
|
↑
|
|
|
-
trggcity
Aktif Üye
|
18.11.2008, 17:09 (UTC)
Mesaj konusu: |
|
|
flood yapma ! paylasım için tsk |
|
|
↑
|
|
|
-
devkodservisi
Uzman Üye
Konum: [..:: İstanbul ::..] l Lütfen Sorularınızı Forumda Sorun !
|
18.11.2008, 17:11 (UTC)
Mesaj konusu: |
|
|
Doğru Konusun ______________  |
|
|
↑
|
|
|
-
webmaster-sir
Bedava-Sitem Bağımlısı
Konum: Teknik Destek
|
18.11.2008, 17:27 (UTC)
Mesaj konusu: |
|
|
trggcity yazmış: flood yapma ! paylasım için tsk |
|
|
↑
|
|
|
-
htmlcentre
Bedava-Sitem Bağımlısı
|
23.11.2008, 08:51 (UTC)
Mesaj konusu: |
|
|
ckpweb yazmış: Çok güzel olmuş da biyere götürüyorum farede tuşu bıraktığım anda hemen eski yerine dönüyor ,benden korktu galiba
Geri dönmesi olumsuz bence bi yönü. bence burakıdığı yerde kalsa iyi olur. ______________   |
|
|
↑
|
|
|
|
