jquery - jQueryはリンクスワップ画像にカーソルを合わせます

Question

ユーザーがリンクにカーソルを合わせると、画像が最後に「-on」が付いた画像と交換される場合、次のようにします。

しかし、タグにカーソルを合わせたときに、画像でスワップを取得するにはどうすればよいですか？

HTMLコード：

<div>
    <a href="#">
        <img src="image.jpg" alt="" />
        Here some caption
    </a>
</div>

画像のURLをヘッダーに配置できません...

Answer 1

$(function () {
    $('a img').hover( function () {
        $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '-on.jpg') );
    });
});

replaceとのjQueryドキュメントをお読みくださいattr。

Answer 2

src画像を変更するにはattr：

$('img').attr("src", "image2.jpg");

ホバーを使用する必要があります：

$("a").hover(
function() {
    $(this).find('img').attr("src", "image2.jpg");
},
function() {
    $(this).find('img').attr("src", "image.jpg");
}
);

Answer 3

タグでDOMの「マウスオーバー」イベントを使用して、それにコールバックを添付できます（その後、画像のURLを変更します）

編集、サンプルコード：

<div>
<a id="myLink" href="#">
    <img id="myImg" src="image.jpg" alt="" />
    Here some caption
</a>
</div>

JSで：

var img = document.getElementById('myImg');
document.getElementById('myLink').onmouseover = function(){
    //manipulate the image source here.
    img.src = img.src.replace(/\.jpg/, '-on.jpg');
}

次に、onmouseoutを使用して元の画像を元に戻す必要があります。

Answer 4

$(document).ready(function($) {
	$('img').on('mouseover', function(){
		src = $(this).attr('src').replace('.gif', '-hover.gif');
		$(this).attr('src', src);
	})
	$('img').on('mouseout', function(){
		src = $(this).attr('src').replace('-hover.gif', '.gif');
		$(this).attr('src', src);
	});	
});

Answer 5

マウスを離したときに画像を元の状態に戻す方法は次のとおりです。

    $(document).ready(function($) {
    	$('img').on('mouseover', function(){
    		src = $(this).attr('src').replace('hover', 'thanks!');
    		$(this).attr('src', src);
    	})
    	$('img').on('mouseout', function(){
    		src = $(this).attr('src').replace('thanks!', 'hover');
    		$(this).attr('src', src);
    	});	
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<img src="http://placeholder.pics/svg/500x150/DEDEDE/555555/hover" />