画像を切り替える

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


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

WEB(ホーム)ページ作成

JavaScript-ジャバスクリプト

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


姉妹サイト

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

WEB・デザイン制作

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

お問い合わせ・ご質問

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

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

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

画像を切り替える

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

画像切り替えサンプル

サンプルソース

<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>
<!--HTML表示後に、Javascriptで定義した命令(change)を0.3秒間隔で実行 します-->
<body onload="setInterval('change()',300)">
<img name="anime" src="test1.jpg" alt="画像切り替えサンプル">
</body>
</html>


■ 画像の補足

「test1.jpg」の画像

「test2.jpg」の画像


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

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

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