Velo初心者向け｜ボタンをクリックして画像を変更する簡単な方法

前回のブログでは、ボタンをクリックしてテキストを変更する基本を学びました。今回はその次のステップとして、ボタンをクリックすると画像が変わるコードの書き方を紹介します。WixのVeloを使って、よりインタラクティブなホームページを作りましょう！

① 必要な要素を配置する

Wixエディターを開き、以下の要素を追加します。

ボタン（ID: myButton）

画像（ID: myImage）

② 画像を用意する

変更するための画像を複数アップロードしておきましょう。

③ Veloのコードを追加する

コードは以下のようになります。

$w.onReady(function () {
    $w("#myButton").onClick(() => {
        $w("#myImage").src = "画像URL";
    });
});

画像URLを事前にアップロードした画像のURLに置き換えてください。

画像URLはWix内に保存した画像を選択し、「URLをコピー」から取得できます。

④ 実際に動かして確認

「プレビュー」で実際に動くか確認しましょう。

まとめ

Veloで画像を切り替える方法を学びました。次回はさらに複雑なインタラクションに挑戦してみましょう！