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.
 

<!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
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale