Forum'da ara:
Ara


Yazar Mesaj
Mesaj30.05.2009, 20:48 (UTC)    
Mesaj konusu: Resmi CEkip Bırak Kodu.???

Arkadaslar Su Sağ Ustte Genelde Olan Resim Tutullan ve Tutup baska yerde bıraktıgında gene aynı yere gelen javascript kodunu bılen varsa biriniz verin yaw ihtiyacım var o koda
Mesaj31.05.2009, 13:23 (UTC)    
Mesaj konusu:

“Çek-Bırak” özellikli nesneler oluşturmak

rozet"Ç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. Wink


Şimdi aşağıdaki adımları takip ederek bu işlemi yapmaya başlayalım:

1. Html kodlaması
2. Css ile biçimlendirme ve konumlandırma
3. 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. Wink

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:

1. 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. Wink

Kod:
<script type="text/javascript" src="http://site.mynet.com/webmaster_sir/JS/rozet.js"></script>


Arrow UNUTMAYIN: CSS-JS-HTML biri olmazsa kod işlemez. 3-ü bir-birine bağlıdır. Biri olmadan diğerleri de bir işe yaramaz. Wink
Mesaj31.05.2009, 13:25 (UTC)    
Mesaj konusu:

Not: Alıntıdır!..
Kusura Bakmayın Yazdıktan Sonra Aklıma Geldi... Sad
Mesaj05.06.2009, 08:07 (UTC)    
Mesaj konusu:

kardeş kod eksik Very Happy
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu