【jQuery】マウスオーバーで画像を切り替える

Tweet

Category JavaScript 2011/01/31

問題

お問い合わせへリンクする画像とか、ボタンの役目の画像を、マウスが乗ったら切り替えたい。

いいjQueryプラグインない？

答え

プラグインを使用するまでもなく、さらっと書ける。

$(function(){

  $("img[src*='.base.']").hover(
    function(){this.src=this.src.replace(".base.",".act.")},
    function(){this.src=this.src.replace(".act.",".base.")}
  )

})

HTMLの方はこうしておく。

<img src="button-image.base.jpg" alt="何かのボタン画像">

.base., .act. という部分は、普段うっかりつけてしまいそうにない命名規則を自分で決めればよい。好みに応じて、.on., .off. という表現にしてもよい。

上のように書いておけば、button-image.base.jpg という画像にマウスが乗ると、button-image.act.jpg という画像に挿し変わり、マウスが外れると button-image.base.jpg に戻る。

some-image.base.png, any-image.base.gif など、拡張子が違っても大丈夫。