ノンカフェインであなたにやさしい

Rails,HTML,JavaScript,jQuery,PHP,CakePHPなど

【jQuery】マウスオーバーで画像を変える

onMouseOver,onMouseOutを使って個別に指定する

<img src="img_off.jpg" alt="" onMouseOver="this.src='img_on.jpg'" onMouseOut="this.src='img_off.jpg'">

これだと個別に指定しなければいけないので汎用的な形としては以下のようにします。

jQueryのhoverを使って変更する

$(function(){
  $("img").hover(
    function () {
      this.src = this.src.replace('_off', '_on');
    },
    function () {
      this.src = this.src.replace('_on', '_off');
    }
  );
});

これで画像のパスに_offが付いているものをhoverした際に_onに切り替えることができます。