JavaScript ile bir resmi boyutlandırmak
Bu çalışmamızda JavaScript ile web sayfamız üzerindeki nesnelerden bir resime ulaşarak onu boyutunu değiştireceğiz. Bu örnenek resmi boyutlandırmak için küçült ve büyült isimli iki fonksiyon kullanacağız.
HTML sayfamıza önce img etiketi ile bir resim ekliyoruz ve resmin ID değerine de "resim" ismini veriyoruz. Sonra altına iki button nesnesini aşağıdaki gibi tanımlıyoruz.
<img src="1.jpg" id="resim"> <br>
<button onclick="kucult()">Resmi Küçült</button>
<button onclick="buyult()">Resmi Büyült</button>
Gelelim JavaScrip tarafına orada da aşağıdaki gibi iki fonksiyon yazıyoruz. Herhangi bir nesnenin ID değerine ulaşmak için aşağıdaki şekilde ulaşıyorduk. DOM(Döküman Nesne Modeli) modelinde bu şekilde kullanımları inceleyebilirsiniz.
document.getElementById("Nesnenin ID değeri")
Resim ID li nesneye de ulaşıp genişlik ve yükseklik değerini de aşağıdaki gibi değiştirebiliyoruz.
document.getElementById("resim").style.width="160px";
document.getElementById("resim").style.height="120px";
Aşağıda kodun tamamı verilmektedir.
Aşağıda kodun tamamı verilmektedir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function kucult(){
document.getElementById("resim").style.width="160px";
document.getElementById("resim").style.height="120px";
}
function buyult(){
document.getElementById("resim").style.width="640px";
document.getElementById("resim").style.height="480px";
}
</script>
</head>
<body>
<img src="1.jpg" id="resim"> <br>
<button onclick="kucult()">Resmi Küçült</button>
<button onclick="buyult()">Resmi Büyült</button>
</body>
</html>
Mutlu kodlamalar,
Oğuzhan TAŞ
Mart, 2023
Mutlu kodlamalar,
Oğuzhan TAŞ
Mart, 2023

Dil Değiştir(Change Language)
Kategoriler
- Csharp(56)
- Csharp Formlar(20)
- Web Tasarım(10)
- CSS(24)
- JavaScript(36)
- PHP(50)
- Laravel(3)
- ASP.net(38)
- Excel(15)
- Güvenlik(4)
- E-Ticaret(3)
- Kariyer(5)
- SQL Server(29)
- MySQL(16)
- Linux(15)
- MacOSX(8)
- Ayarlar(12)
- Bilgisayar Ağları(3)
- Symfony(1)
- Teknoloji(7)
- VBS(1)
- Arduino(6)
- RaspberryPi(1)
- Algoritmalar(15)
- HTML(3)
- Python(2)
- Bash Script(6)
- C Programlama(10)
- Makine Öğrenmesi(0)
- Flutter - Dart(7)
En çok Okunan 18 Makale
- :: Excelde EĞER Fonksiyonu Kullanımı...
- :: Csharp ile Access Veritabanı Bağlan...
- :: SQL nedir, Temel SQL Komutları nele...
- :: Hangi Linux Dağıtımı?
- :: OSX İşletim Sistemine PHP, MySQL, A...
- :: PHP dilini kullanarak MySQLi tekniğ...
- :: Excel Hesap tablosunda EĞERSAY Fonk...
- :: Excel Hesap tablosunda ÇOKETOPLA Fo...
- :: Mac Bilgisayarınıza Windows 7 Yükle...
- :: Excel Hesap tablosunda ÇOKEĞERSAY F...
- :: Excel Hesap tablosunda ETOPLA Fonks...
- :: Hangi Programlama Dilini Öğrenmeliy...
- :: PHP ile Basit Dosya Yükleme
- :: PHP Dili kullanarak MySQLi Tekniği ...
- :: Hangisi acaba, PHP mi ASP.NET mi ?
- :: PHP ile MySQL veritabanına MySQLi t...
- :: Asp.net ile Sql Server Veritabanına...
- :: PhpMyAdmin Şifresi Nasıl Değiştiril...