Merhaba, uzun bir aradan sonra bugün sitenizde javascript ile renk kutusu kullanarak arka plan rengini nasıl değişebilirsiniz onu anlatıcam.
Öncelikle anlatımda kullandığım program ve siteleri buraya ekliyerek başlıyorum:
Kullandığm program ve siteleri verdiğime göre çalışmaya başlayalım.
Yeni bir metin belgesi açıyoruz ismini istediğiniz gibi değişebilirsiniz ama sonun .html olmasına dikkat edin.
Yeni bir metin belgesi daha açıyoruz yine aynı şekilde ismini istediğiniz gibi değişebilirsiniz ama sonunun .css olmasına dikkat edin.
HTML ve CSS dosyalarımızı oluşturduğumuza göre içine sihirli kelimelerimizi ekleyelim.
- Html dosyasını açıyoruz ( Küçük bir öneri verdiklerimi kopyala yapıştır yapmak yerine bakarak kendiniz yazmaya çalışın. )
Ben kolay olsun diye yeni bir klasör oluşturdum html ve css dosyasını oraya ekledim sizlerde css dosyası ile html dosyası aynı klasörde bulunmuyorusa href="thtstylejs.css"> buraya css dosyanın bulunduğu klasörün konumunu ekleyin.
örnek: C:\test\root\thtjshtmlcss\jssite
Buraya kadar tamamsa birazda <body> Buraya </body> eklemeler yapalım.
<div class="box"></div> burada eklemek istediğimiz şeyin kutu halinde olmasını daha sonra <a id="yeşil"></a> ile ilk kutunun yeşil olmasını sağladık.
Sizler istediğiniz kadar kutu ekleyebilirsiniz ben örnek için 3 tane ekliyorum.
Sıra geldi yeşilin yeşil olduğunu sarının sarı olduğunu söylemeye, burada bize yardımcı olacak siteyi sizlere konun başlarında verdim.
Burada bulunan kodu alıyor html dosyasında belirlemiş olduğumuz sarı kutsuna ekliyoruz.
diğer kutularıda aynı yukarıda olduğu gibi düzenliyoruz.
Şimdilik html dosyası ile işimiz bitiyor.
Birazda css dosyasında çalışalım bu bölümde ben visual studio code eklenti olarak bulunan Live Server eklentisini kullanıcam bu özellik localhost üzerinden aynı bir site gibi çalışıyor siz düzenlemenizi yapıyorsunuz save aldığınız gibi localhost üzerinde site de düzenleniyor( sürekli f5 atmak zorunda kalmıyorsunuz ).
Burada body { } eklemiş olduklarımız sitenin genel görünüş kodlarıdır "background" hangi renkte olmasını istiyorsak onu belirleriz. "margin" kenarlara boşluk vermeye yarar ben burada 0 olarak kullanıyorum, "padding" içeri ile kenar arasında bulunan dolgu genişliğini belirler ki ben burada onuda 0 kullanıyorum.
body dilediğiniz gibi düzenledikten sonra site üzerinde yapmış olduklarınız buna benzer şekilde gözükecek.
Şimdi sıra geldi eklemiş olduğumuz kutları düzenlemeye nerede neyin bulunmasını nasıl bulunmasını ayarlamamıza.
Yukarıda olduğu gibi burada da kutunun hangi yönde olmasını, boyutunu, rengini ayarlıyoruz.
Burada dikkat etmeniz gereken yer benim eklemiş olduğum #yeşil bölümüne siz html sayfasında kutulara eklemiş olduğunuz rengin ismini girmek olacaktır.
Sitemizin son durumuna bir bakalım
Evet kusursuz bir şekilde çalışıyor sıra geldi diğer eklemiş olduğumuz renk kutularınıda buraya eklemeye.
Sizler html dosyasında eklemiş olduğunuz renk kodlarını ve isimlerini gireceksiniz.
İşlemeleri tamamladıktan sonra sitemize bir daha bakalım.
Evet css dosyasıyla işimiz bitti, sıra geldi son aşamaya html dosyasına eklediklerimizin çalışması için javascript yardımıyla düzenleme yapmaya.
Burayı yaptıktan sonra kutularımıza function ile çalışması için "changecolor(id)" satırını eklemeliyiz.
Kısaca ne yaptığımızı söyliycek olursak javascript function yardımıyla kutlara vermiş olduğumuz renklerin site tarafında kutuya tıklandığında değişmesini sağladık.
Yukarıda gösterdiğim gibi diğer kutlarında önüne " onclick="changecolor(id) " ekleyerek id bölümüne kutunun rengini yazıyoruz.
Ve Son
Kullandığm program ve siteleri verdiğime göre çalışmaya başlayalım.
Yeni bir metin belgesi açıyoruz ismini istediğiniz gibi değişebilirsiniz ama sonun .html olmasına dikkat edin.
Yeni bir metin belgesi daha açıyoruz yine aynı şekilde ismini istediğiniz gibi değişebilirsiniz ama sonunun .css olmasına dikkat edin.
HTML ve CSS dosyalarımızı oluşturduğumuza göre içine sihirli kelimelerimizi ekleyelim.
- Html dosyasını açıyoruz ( Küçük bir öneri verdiklerimi kopyala yapıştır yapmak yerine bakarak kendiniz yazmaya çalışın. )
Kod:
<!DOCTYPE html>
<html>
<head>
<**** charset="utf-8">
<title></title>
<link rel="stylesheet" href="thtstylejs.css">
</head>
<body>
</body>
</html>- <title></title> Buraya sayfa başlığını ekliyoruz.
- <link rel="stylesheet" href="thtstylejs.css"> Buraya eklemiş olduğumuz satır css dosyasın ne olduğunu ve nerede bulabilceğin komutunu veriyrouz.
Ben kolay olsun diye yeni bir klasör oluşturdum html ve css dosyasını oraya ekledim sizlerde css dosyası ile html dosyası aynı klasörde bulunmuyorusa href="thtstylejs.css"> buraya css dosyanın bulunduğu klasörün konumunu ekleyin.
örnek: C:\test\root\thtjshtmlcss\jssite
Buraya kadar tamamsa birazda <body> Buraya </body> eklemeler yapalım.
Kod:
<body>
<div class="box">
<a id="yeşil"></a>
</div>
</body><div class="box"></div> burada eklemek istediğimiz şeyin kutu halinde olmasını daha sonra <a id="yeşil"></a> ile ilk kutunun yeşil olmasını sağladık.
Sizler istediğiniz kadar kutu ekleyebilirsiniz ben örnek için 3 tane ekliyorum.
Kod:
<body>
<div class="box">
<a id="yeşil"></a>
<a id="sarı"></a>
<a id="mavi"></a>
</div>
</body>Sıra geldi yeşilin yeşil olduğunu sarının sarı olduğunu söylemeye, burada bize yardımcı olacak siteyi sizlere konun başlarında verdim.
Burada bulunan kodu alıyor html dosyasında belirlemiş olduğumuz sarı kutsuna ekliyoruz.
Kod:
<a id="sarı">#ffff00</a>diğer kutularıda aynı yukarıda olduğu gibi düzenliyoruz.
Kod:
<body>
<div class="box">
<a id="yeşil">#00cc00</a>
<a id="sarı">#ffff00</a>
<a id="mavi">#0000ff</a>
</div>
</body>Şimdilik html dosyası ile işimiz bitiyor.
Birazda css dosyasında çalışalım bu bölümde ben visual studio code eklenti olarak bulunan Live Server eklentisini kullanıcam bu özellik localhost üzerinden aynı bir site gibi çalışıyor siz düzenlemenizi yapıyorsunuz save aldığınız gibi localhost üzerinde site de düzenleniyor( sürekli f5 atmak zorunda kalmıyorsunuz ).
Kod:
body{
margin: 0;
padding: 0;
background: ;
}Burada body { } eklemiş olduklarımız sitenin genel görünüş kodlarıdır "background" hangi renkte olmasını istiyorsak onu belirleriz. "margin" kenarlara boşluk vermeye yarar ben burada 0 olarak kullanıyorum, "padding" içeri ile kenar arasında bulunan dolgu genişliğini belirler ki ben burada onuda 0 kullanıyorum.
body dilediğiniz gibi düzenledikten sonra site üzerinde yapmış olduklarınız buna benzer şekilde gözükecek.
Şimdi sıra geldi eklemiş olduğumuz kutları düzenlemeye nerede neyin bulunmasını nasıl bulunmasını ayarlamamıza.
Kod:
.box{
position: absolute;
top: 40px;
right: 40px;
padding: 5px;
background: #ffffff;
}
.box a{
width: 40px;
height: 40px;
float: left;
text-indent: -9999px;
margin: 5px;
cursor: pointer;
}
#yeşil{
background: #00cc00;
}Yukarıda olduğu gibi burada da kutunun hangi yönde olmasını, boyutunu, rengini ayarlıyoruz.
Burada dikkat etmeniz gereken yer benim eklemiş olduğum #yeşil bölümüne siz html sayfasında kutulara eklemiş olduğunuz rengin ismini girmek olacaktır.
Kod:
#yeşil{
background: #00cc00;
}Sitemizin son durumuna bir bakalım
Evet kusursuz bir şekilde çalışıyor sıra geldi diğer eklemiş olduğumuz renk kutularınıda buraya eklemeye.
Kod:
#yeşil{
background: #00cc00;
}
#sarı{
background: #ffff00;
}
#mavi{
background: #0000ff;
}Sizler html dosyasında eklemiş olduğunuz renk kodlarını ve isimlerini gireceksiniz.
İşlemeleri tamamladıktan sonra sitemize bir daha bakalım.
Evet css dosyasıyla işimiz bitti, sıra geldi son aşamaya html dosyasına eklediklerimizin çalışması için javascript yardımıyla düzenleme yapmaya.
Kod:
<script type="text/javascript">
function changecolor(id) {
********.body.style.background = ********.getElementById(id).innerHTML;
}
</script>Burayı yaptıktan sonra kutularımıza function ile çalışması için "changecolor(id)" satırını eklemeliyiz.
Kod:
<a onclick="changecolor('yeşil')" id="yeşil">#00cc00</a>Kısaca ne yaptığımızı söyliycek olursak javascript function yardımıyla kutlara vermiş olduğumuz renklerin site tarafında kutuya tıklandığında değişmesini sağladık.
Yukarıda gösterdiğim gibi diğer kutlarında önüne " onclick="changecolor(id) " ekleyerek id bölümüne kutunun rengini yazıyoruz.
Kod:
<div class="box">
<a onclick="changecolor('yeşil')" id="yeşil">#00cc00</a>
<a onclick="changecolor('sarı')" id="sarı">#ffff00</a>
<a onclick="changecolor('mavi')" id="mavi">#0000ff</a>
</div>Ve Son
Son düzenleme:
