JavaScript（ジャバスクリプト）を使って【画像を切り替える方法】を、わかりやすく解説いたします。

PC玉手箱TOP　＜　JavaScript（ジャバスクリプト）とは　＜　画像を切り替える

WEB（ホーム）ページ作成

JavaScript-ジャバスクリプト

JavaScript（ジャバスクリプト）とは
画像を切り替える

姉妹サイト

Woman玉手箱（08.03.03-OPEN）

全ての女性を応援します。
HAPPYサイト-Woman玉手箱。

WEB・デザイン制作

WEB制作を作成しております。
詳細はこちらを御覧下さい。

お問い合わせ・ご質問

お問い合わせやご質問等は
こちらからお気軽にご連絡下さい。

ご掲載・リンク希望者様へ

ご掲載やリンクをご希望の方は、こちらからご連絡下さい。

画像を切り替える

画像を切り替えて、画像に動きをつける方法を解説いたします。
以下はそのサンプルです。

サンプルソース

<html>
<head>
<title>画像を切り替える</title>

<script>
<!--

//表示したい画像の設定（画像を2枚用意して下さい）
imageA = new Image();imageA.src="test1.jpg";     //　imageA に「test1.jpg」を代入します。
imageB = new Image();imageB.src="test2.jpg";     //　imageB に「test2.jpg」を代入します。

// ▼画像の表示を切り替える命令部分 ==========================================
function change(){
    // 現在表示している画像の判定
    if (document.anime.src==imageA.src)
        document.anime.src=imageB.src;                  // imageA⇒imageBへ切り換え
    else
        document.anime.src=imageA.src;                  // imageB⇒imageAへ切り換え
}
// ▲画像の表示を切り替える命令部分 ==========================================
//-->
</script>
</head>

<body onload="setInterval('change()',300)">
<img name="anime" src="test1.jpg" alt="画像切り替えサンプル">
</body>
</html>

■　画像の補足

「test1.jpg」の画像	「test2.jpg」の画像

■　青文字で記述されている箇所は、場合に応じて変更して下さい。

↑このページのトップに戻る

お問い合わせや設定・使い方の追加などありましたら、 info@cyber-concierge.co.jp まで。