v2.5.2
Giriş yap

Üstüne gelince resim değiştirme nasıl yapabilirim?

bukr3j
468 defa görüntülendi ve 2 kişi tarafından değerlendirildi
2 6

"img" etiketiyle yerleştirdiğim resmin üstüne gelindiğinde gif olarak değişmesini istiyorum, olmadı gifin üstüne gelindiğinde nasıl oynayacağı da olur. Biraz bakındım, sadece "background-image" kullanılarak yapılanları bulabildim.

css html javascript
Cevap yaz
Cevaplar (6)
p42s
984 gün önce

CodePen: https://codepen.io/P42s/pen/xxpGJyN

<div class="item">
	<img class="item__img" data-swap="https://i.giphy.com/media/l41m359K5ExF8aRoc/giphy.gif" src="https://www.wallpaperup.com/uploads/wallpapers/2015/05/29/702762/c7481417c549c5733d851692740f24db-700.jpg" alt="">
</div>

.item {
    width: 350px;
	height: 250px;
	position: relative;
	overflow: hidden;
}

.item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 30%;
}

var imageSwap = function () {
	var $this = $(this);
	var newSource = $this.data("swap");
	$this.data("swap", $this.attr("src"));
	$this.attr("src", newSource);
};

$(function () {
	$(".item__bg").hover(imageSwap, imageSwap);
});
0
#009287
erenbg2005
1008 gün önce

Giriş

Öncelikle Merhaba Bu Tarz Durumlar İçin İllaki JQuery vs. Kullanmak Zorunda Değilsiniz.Vanilla ilede Rahatça Yapılabilir

HTML


<div >
    <img id="foto" onhover="change()" src="foto">
</div>

JavaScript

let fotochng = document.getElementById('foto');

function change(){
    
    fotochng.src = "yenifoto"

}

Şeklinde Bir Yol İzleyebilirsin Devamını Sen Getirebilirsin Bunun Çok Basit

0
#009032
desrana
1008 gün önce
<img src="resim_url" data-degis="degisecek_resim_url">

$("img").hover(function(){

    var degis = $(this).attr("data-degis");
    $(this).attr("src", degis);

});

Emin arkadaşımızın yanıtını görmedim, aynı işlev benimkide :)

0
#009010
rotaile
1009 gün önce

css ile hover olayınca dispylay:none - display-block özellikleriyle yada opacity özellikleri ile yapılabilir.

0
#009009
bukr3j
1011 gün önce

Teşekkürler, şu anda deneyemeyeceğim, denediğimde sıknıtı yaşamazsan "Doğru cevap" olarak işaretlerim.

0
#008983
eminkurt
1011 gün önce
<img id="gorsel" class="gorsel" src="resim.png">

$(".gorsel").on("mouseover", function () {
	$("#gorsel").attr("src","diger-gorsel.gif");
	});

Bunu deneyebilirsin

3
#008981