Mouse ile üzerine gelince değişen resim | HTML + CSS
Merhaba arkadaşlar.Uzun bir aradan sonra yeni bir paylaşım yapıyorum.Basit ama web sayfanizda kullanınca göze güzel görünecek bir özellikten bahsedeceğim.Özelliğimiz; Mouse ile resim üzerine gelince değişip üzerinden çekince eski haline gelen resimler.
Bu özelliği menülerde,butonlarda yada resim paylaşımlarında kullanabilirsiniz.
Hemen kodları deneyelim.Masaüstünüze
index.html,resim1.jpg,resim2.jpg dosyaları ekleyin.Ardından not defteri ile index.html dosyasını açıp içine aşağıdaki kodları ekleyip kaydedelim.
<html>
<style>
#degisenresim {
height: 70px;
width: 120px;
background-image: url('resim1.jpg');
}
#degisenresim:hover {
background-image: url('resim2.jpg');
}
</style>
<img id="Library">
</html>
Kodları kaydettikten sonra index.html dosyasını tarayıcı ile açtığınızda sayfada resim1.jpg'yi göreceksiniz üzerine mouse götürdüğünüzde resim1 kaybolacak yerine resim2.jpg görünecektir tekrar mouse kaldırdığınızda resim1.jpg görünecektir.Umarım faydalı olmuştur.İyi çalışmalar.
Bu özelliği menülerde,butonlarda yada resim paylaşımlarında kullanabilirsiniz.
Hemen kodları deneyelim.Masaüstünüze
index.html,resim1.jpg,resim2.jpg dosyaları ekleyin.Ardından not defteri ile index.html dosyasını açıp içine aşağıdaki kodları ekleyip kaydedelim.
<html>
<style>
#degisenresim {
height: 70px;
width: 120px;
background-image: url('resim1.jpg');
}
#degisenresim:hover {
background-image: url('resim2.jpg');
}
</style>
<img id="Library">
</html>
Kodları kaydettikten sonra index.html dosyasını tarayıcı ile açtığınızda sayfada resim1.jpg'yi göreceksiniz üzerine mouse götürdüğünüzde resim1 kaybolacak yerine resim2.jpg görünecektir tekrar mouse kaldırdığınızda resim1.jpg görünecektir.Umarım faydalı olmuştur.İyi çalışmalar.
önizleme de koyarsanız daha iyi olur
YanıtlaSildeneme
YanıtlaSildenemee yorum
YanıtlaSilsss
YanıtlaSilafs
YanıtlaSilselam
YanıtlaSildeneme
Silyeni bir denem
YanıtlaSildeneme selam
YanıtlaSilselam
YanıtlaSilşşş
YanıtlaSilselam deneme 123444
YanıtlaSilafsafa
YanıtlaSilyeneme yeni yorum
YanıtlaSildeneme yorum son sanırım
YanıtlaSilasfaasfa
YanıtlaSilsfafa
YanıtlaSiluuu
YanıtlaSildenemeeess
YanıtlaSilsafa
YanıtlaSilsf
YanıtlaSilBedava kesintisiz sohbet için sizlerde aramıza katılın uyeliksiz sohbet edin.
YanıtlaSilChat Odaları
Sohbet
İrc Forumu