JavaScript ile Resmin Üzerine Gelince Zoom Yapma

Bu yazımda Javascript kodları yazarak resmin üzerine gelince zoom yapma uygulaması yapacağız.

Bu uygulamanın en çok kullanıldığı yerler E-Ticaret siteleridir. Ürün detay sayfalarında bulunan resimlerin üzerine gelince yanında resmin yakınlaştırılmış halini gösterirler. Bizim yapacağımız uygulama da bunun aynısı olacak. 

Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.  

resmin-uzerine-gelince-zoom-yapma

Gördüğünüz gibi soldaki çanta resminin üzerinde fare ile hareket ettiğimizde sağında bulunan alanda çanta resminin zoom halini görüyoruz.

Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.

Konuyu daha fazla uzatmadan resmin üzerine gelince zoom yapma kodlarına geçelim. 

Html Zoom Yapma Kodları 

 ⇒  img etiketinin src niteliğine kullanmak istediğiniz resmin Url‘ini yazmalısınız.

Css Zoom Yapma Kodları 

 ⇒  Css kodları üzerinde değişiklik yaparak soldaki resmin bulunduğu alanın genişlik ve yükseklik değerini yada sağda resmin zoom halinin göründüğü alanın genişlik ve yükseklik değerini değiştirebilirsiniz.

 ⇒  Uygulamamızda her iki alanın da genişlik ve yükseklik değerine 300px verdim.

 ⇒  Sağdaki alanın left özelliğine 350px değeri vererek soldaki alandan 50px sağda olmasını sağladım. Soldaki alan 300px olduğu için aradaki fark kadar yani 50px kaydırmış oluyoruz.

 ⇒  Fareyi hareket ettirdiğinizde dikkat ederseniz bir kare de onunla birlikte hareket ediyor. Bu karenin genişlik ve yükseklik değerine ise 40px verdim.

Bu değerleri kendi tasarımlarınıza göre değiştirip uygun hale getirebilirsiniz.

JavaScript Zoom Yapma Kodları 

Html, Css ve JavaScript kodları yazarak resmin üzerine gelince zoom yapımı bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

BOOTSTRAP 4 – IMAGES (RESİMLER)

Html Resim Ekleme

Html Resme Link Verme

Yeni bir yazımda görüşmek üzere.

Kaynaklar

https://www.w3schools.com/

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link