【jQuery】好きな画像をボタンにする

# 好きな画像をボタンにする

Webサイトでボタンを作りたいとき、まず思い浮かべるのは「buttonタグ」や「inputタグ（type="button"）」で作る方法だと思います。
ですが他にも、**好きな画像をボタンのように扱う**こともできるので、今回はその方法をご紹介します。
けっこう簡単です。

題材として、ボタンを押すとブドウの画像が出てくるサイトを作ります。
![page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558315/f6b93aec-2633-a2c6-594c-776aac3e77d7.png)


# 用意するもの

* 押す前のボタン画像
* 押した後のボタン画像
* ブドウの画像
* htmlファイル
* cssファイル
* jsファイル

ボタン画像は以下をダウンロードして使っていただいても構いません。

押す前ボタン
![button_neutral.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558315/06e2228c-25c6-b97a-28e2-c4ae9e02edde.png)
押した後ボタン
![button_active.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558315/c3550298-4e8a-6eb0-cc95-a4bf8facde81.png)



今回は以下のようなディレクトリ構成で作ります。
![dir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558315/0961cc1b-d87b-3c06-45a6-c0a5650ebd72.png)

ではさっそく作っていきましょう。
全部で3ステップ！

# ステップ1　枠組みを作る

以下のように**htmlファイル**と**cssファイル**を書いてみてください。
※ 枠組みは本題じゃないので適当でも大丈夫です。

```index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>好きな画像をボタンにする</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="javascript/script.js"></script>
</head>

<body>
    <div id="main-div">
        <div id="h1-div" class="common lightgreen">
            <h1>ボタンを押すとブドウが出るよ</h1>
        </div>
        <div id="action-div" class="common lightgreen">
            <!-- ボタン画像を表示するdiv -->
            <div id="button-div" class="common whitesmoke">
            </div>
            <!-- ブドウ画像を表示するdiv -->
            <div id="grape-div" class="common whitesmoke">
            </div>
        </div>
    </div>
</body>

</html>
```

```style.css
.common {
    margin: 10px;
    border-radius: 10px;
    text-align: center;
}

.lightgreen {
    background-color: lightgreen;
    width: 50%;
}

.whitesmoke {
    background-color: whitesmoke;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#action-div {
    display: flex;
}
```

この状態で**index.html**を実行すると、以下のような枠組みが表示されると思います。
![page2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558315/d61cdb2f-e9dd-30ed-e09a-719cb820c080.png)

# ステップ2　画像でボタンを作る
まず**index.html**の```id="button-div"```のdiv内に、ボタン画像を埋め込むためのspanタグを書いてください。

```html
<div id="button-div" class="common whitesmoke">
    <!-- ボタン画像を埋め込むためのspanタグ -->
    <span id="button"></span>
</div>
```

次に**cssファイル**に以下のルールセットを追加してください。
※ cssの各プロパティの意味は、是非調べてみてください。

```css
/* ボタン画像のルール */
#button {
    background-image: url("../image/button_neutral.png");
    background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 200px;
    height: 100px;
}

/* クリック時は別の画像に置き換える */
#button:active {
    background-image: url("../image/button_active.png");
}
```

この状態で**index.html**を実行すると、ボタン画像が表示され、押すとへこむと思います。
![page1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558315/c8ff5da7-f669-6e2a-33e0-0440f1430428.png)

# ステップ3　ブドウを出す処理を作る
jsファイルに、以下のように処理を書いてください。

```script.js
$(function () {
    // ブドウを表示するimgタグ
    var grape = '<img class="grape" src="./image/grape.png"></img>';

    // 上記「grape」をappendする関数
    var appendGrape = function () {
        $("#grape-div").append(grape);
    }

    // ボタンクリック時に上記「appendGrape」が呼ばれるように設定
    $("#button").click(appendGrape);
});
```

これで完成です！
![page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558315/da2cf3ea-3bbf-6a97-cc64-cf1421d59a61.png)

今回は「.click()」でクリックイベントを付与しましたが、「.on()」を使って付与することもできます。
それは[こちらの記事](https://qiita.com/kutsushita202829/items/4a65b3371526f761c500)で紹介しているので、良かったら覗いてみてください。

# ひとこと
なんでブドウか？
最近[仮面ライダー龍玄](https://www.kamen-rider-official.com/zukan/kamen_rider_member/145)にハマってるから。