アトリエロワ

マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。

画像を2種類用意する。（後ろに_onをつけたもの。）

sample.jpg　と　sample_on.jpg

html

<img src="../images/sample.jpg" alt="" class="over beforephoto">

jquery

レスポンシブで違う動作をさせる

if (window.matchMedia('(max-width: 768px)').matches) {
 //スマホの時はクリックで画像切り替え
 $(function(){
  $(".over").click(function(){
    if($('.beforephoto').length){
      $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-zA-Z]+)$/, "$1_on$2"));
      $(this).removeClass('beforephoto');
    } else {
      $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-zA-Z]+)$/, "$1$2"));
      $(this).addClass('beforephoto');
    }});
});
} else if (window.matchMedia('(min-width:769px)').matches) {
  //パソコンの時はマウスオーバーで画像切り替え
$(function(){
  $(".over").mouseover(function(){
      $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-zA-Z]+)$/, "$1_on$2"));
 }).mouseout(function(){
    $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-zA-Z]+)$/, "$1$2"));
 })
});
}

HOME > javascript > マウスオーバー・マウスアウト（スマホの時はクリック）で画像を切り替えるjquery。

javascript

javascript

+ More