"Çek-Bırak" özellikli nesneler Olusturmak

“Ç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.

Kod:

<div id="rozet">

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(http://site.mynet.com/webmaster_sir/RESIMLER/rozet.png) 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>