オンマウスで別の画像に切り替えたいのですがー
ほうほう
実装サンプル、JavaScriptだけで画像を切り替える
画像にマウスを置く（オンマウス）と画像が切り替わる実装サンプルです。
See the Pen JavaScriptだけで画像を切り替える by 125naroom (@125naroom) on CodePen.
HTML
<a href="#" class="btn">
<img src="https://125naroom.com/demo/img/btn_off.png" alt="BUTTON">
</a>
JavaScript
//マウスオーバー時の処理
function mouseOn(){
var obj = document.getElementById("btn");
obj.src = "https://125naroom.com/demo/img/btn_on.png";
}
//マウスアウト時の処理
function mouseOff(){
var obj = document.getElementById("btn");
obj.src = "https://125naroom.com/demo/img/btn_off.png";
}
実装サンプル、jQueryを使って画像を切り替える
ページ内に複数のボタンがある場合はとても便利です。
画像の名前に『_off』と『_on』を付けるのをお忘れなく。
btn_on.png
btn_off.png
See the Pen jQueryを使って画像を切り替える by 125naroom (@125naroom) on CodePen.
HTML
<a href="#" class="btn">
<img src="https://125naroom.com/demo/img/btn_off.png" alt="BUTTON">
</a>
jQuery
$(function () {
function smartRollover() {
if (document.getElementsByTagName) {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
try {
if (images[i].getAttribute("src").match("_off.")) {
images[i].onmouseover = function () {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function () {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
} catch (e) {
//getAttributeで取得する属性が無かった場合、nullが返ってきてエラーになる為回避
}
}
}
}
if (window.addEventListener) {
window.addEventListener("load", smartRollover, false);
} else if (window.attachEvent) {
window.attachEvent("onload", smartRollover);
}
});
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
ロールケーキが食べたくなってきましたー
買いに行きましょうー
