Vue.jsでマウスオーバー時に画像を切り替える方法

課題を持った人

Vue.jsでマウスオーバー時に画像が切り替わる処理を実装したいんだけど、どうやってやればいいの？

こういった要望に答えます。

下準備として、以下をご用意ください。すべて同階層のディレクトリに格納してください。

index.html
img_on.png ※マウスカーソルが重なった時に表示される画像
img_off.png ※マウスカーソルが外れた時に表示される画像

1 Vue.jsを使うための準備
2 Vueインスタンスをマウントする
3 関数を呼び出す処理を追加する
4 関数を定義する

Vue.jsを使うための準備

Vue.jsを使うための準備をします。Vue.jsの一番お手軽な導入方法は、script要素で直接読み込むことです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>

</head>

<body>

</body>

</html>

Vueインスタンスをマウントする

Vue.jsの処理は、Vueインスタンスを生成し、DOM要素にマウントするところから始まります。マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えることです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>
  </head>
  <body>
    <div id="app"></div> <!-- 追加 -->
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <!-- ここから追加 -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        new Vue({
          el: '#app',
        })
      }, false);
    </script>
    <!-- ここまで追加 -->
  </body>
</html>

<!doctype html>

<head>

<title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>

</head>

<body>

document.addEventListener('DOMContentLoaded', function() {

new Vue({

el: '#app',

})

}, false);

</script>

</body>

</html>

関数を呼び出す処理を追加する

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>
  </head>
  <body>
    <div id="app">
      <!-- ここから追加 -->
      <img
        @mouseover="changeImg"
        @mouseleave="returnImg"
        src="./img_off.png"
        alt="">
      <!-- ここまで追加 -->
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        new Vue({
          el: '#app',
        })
      }, false);
    </script>
  </body>
</html>

<!doctype html>

<head>

<title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>

</head>

<body>

<img

@mouseover="changeImg"

@mouseleave="returnImg"

src="./img_off.png"

alt="">

</div>

document.addEventListener('DOMContentLoaded', function() {

new Vue({

el: '#app',

})

}, false);

</script>

</body>

</html>

「@mouseover=”changeImg”」という記述は、画像にマウスカーソルが重なった時に、changeImg関数を呼ぶという意味です。「@mouseover」は「v-on:mouseover」の省略形です。

「@mouseleave=”returnImg”」という記述は、画像からマウスカーソルが外れた時に、returnImg関数を呼ぶという意味です。「@mouseleave」は「v-on:mouseleave」の省略形です。

関数を定義する

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>
  </head>
  <body>
    <div id="app">
      <img
        @mouseover="changeImg"
        @mouseleave="returnImg"
        src="./img_off.png"
        alt="">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        new Vue({
          el: '#app',

          //ここから追加する
          methods: {
            // mouseover時の処理
            changeImg: function(e) {
              var imgUrl = e.target.getAttribute("src");
              var imgUrl = imgUrl.replace(/\/(.*)_off\.png/g,"/$1_on.png");
              e.target.setAttribute("src", imgUrl)
            },
            // mouseleave時の処理
            returnImg: function(e) {
              var imgUrl = e.target.getAttribute("src");
              var imgUrl = imgUrl.replace(/\/(.*)_on\.png/g,"/$1_off.png");
              e.target.setAttribute("src", imgUrl)
            }
          }
          // ここまで追加する

        })
      }, false);
    </script>
  </body>
</html>

<!doctype html>

<head>

<title>Vue.jsでマウスオーバー時に画像を切り替える処理を作る</title>

</head>

<body>

<img

@mouseover="changeImg"

@mouseleave="returnImg"

src="./img_off.png"

alt="">

</div>

document.addEventListener('DOMContentLoaded', function() {

new Vue({

el: '#app',

//ここから追加する

methods: {

// mouseover時の処理

changeImg: function(e) {

var imgUrl = e.target.getAttribute("src");

var imgUrl = imgUrl.replace(/\/(.*)_off\.png/g,"/$1_on.png");

e.target.setAttribute("src", imgUrl)

// mouseleave時の処理

returnImg: function(e) {

var imgUrl = e.target.getAttribute("src");

var imgUrl = imgUrl.replace(/\/(.*)_on\.png/g,"/$1_off.png");

e.target.setAttribute("src", imgUrl)

}

// ここまで追加する

})

}, false);

</script>

</body>

</html>

関数はmethodsプロパティ内に定義します。

changeImgメソッドが呼び出された時の動作は以下のとおりです。

対象画像のURIを取得する
取得したURIの「_off.png」の部分を正規表現を使って「_on.png」に置き換え
「_on.png」に置き換えたURIを画像に適用する

returnImgメソッドが呼び出された時の動作は以下のとおりです。

対象画像のURIを取得する
取得したURIの「_on.png」の部分を正規表現を使って「_off.png」に置き換え
「_off.png」に置き換えたURIを画像に適用する

筆者

他にもいろいろ作り方はあると思いますが、Vue.jsでマウスオーバー時に画像を切り替える処理の紹介でした。

Vue.jsを使うための準備

Vueインスタンスをマウントする

関数を呼び出す処理を追加する

関数を定義する

Laravelでデータベースのカラム設定を変更する

UbuntuにComposerをインストールするにはこんな風に

Homesteadを使ってLaravel開発環境を構築する方法

Homestead+VSCode+XdebugでPHPデバッグを実現する

改行あり文章をVue.jsのdataに格納しtextareaに表示する

【Python】venvで作成した仮想環境をコピーする方法