かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】

画像の重ね合わせ順序変更（zIndex）

<html>
<head>
<title>画像の重ね合わせ順序変更</title>
    <script language="javascript">
    <!--
    function change(n) {
        if(n == 1) {
            img1.style.zIndex = 3
            img2.style.zIndex = 1
            img3.style.zIndex = 2
        }
        else if(n == 2) {
            img1.style.zIndex = 1
            img2.style.zIndex = 3
            img3.style.zIndex = 2
        }
        else if(n == 3) {
            img1.style.zIndex = 1
            img2.style.zIndex = 2
            img3.style.zIndex = 3
        }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    #img1    {
        position:    absolute;
        z-index:    0;
        top:        50px;
        left:        50px;
        border:        2px #f00 solid;
    }
    #img2    {
        position:    absolute;
        z-index:    1;
        top:        100px;
        left:        100px;
        border:        2px #f00 solid;
    }
    #img3    {
        position:    absolute;
        z-index:    2;
        top:        150px;
        left:        150px;
        border:        2px #f00 solid;
    }
    //-->
    </style>

</head>
<body>
<p>画像をクリックすると前面に来ます。</p>
<img src="../../sample/img/img.jpg" id="img1" alt="画像1" onclick="change(1)">
<img src="../../sample/img/img.jpg" id="img2" alt="画像2" onclick="change(2)">
<img src="../../sample/img/img.jpg" id="img3" alt="画像3" onclick="change(3)">
</body>
</html>

〔実行する〕

JavaScript

●Hello world !	●ユーザーエージェントを表示（navigator.userAgent）
●ブラウザ情報をすべて表示（navigator）	●画面の解像度を表示（screen.width, screen.height）
●画面の色数を表示（screen.colorDepth）	●リンク元ＵＲＬを表示（document.referrer）
●ドキュメント情報をすべて表示（document）	●ウインドウ情報をすべて表示（window）
●ロケーション情報をすべて表示（location）	●警告ダイアログにメッセージ（alert）
●ステータスバーにメッセージ（status）	●新しいウインドウにメッセージ（window.open）
●マウスクリック時にメッセージ（onClick）	●マウスダウン時にメッセージ（onMousedown）
●マウスアップ時にメッセージ（onMouseup）	●マウスオーバー時にメッセージ（onMouseover）
●マウスアウト時にメッセージ（onMouseout）	●フォーカス移動時にメッセージ（onFocus）
●フォーカスが離れた時にメッセージ（onBlur）	●選択項目変更時にメッセージ（onChange）
●入力欄の文字列選択時にメッセージ（onSelect）	●フォーム送信時にメッセージ（onSubmit）
●フォームリセット時にメッセージ（onReset）	●貼り付け禁止のフォーム（コピペ禁止　onPaste）
●画像読み込み失敗時にメッセージ（onError）	●右クリック時にメッセージ（oncontextmenu）
●右クリック時にメッセージ（event.button）	●別ウインドウに指定のページを開く（window.open）
●ウインドウを開く（サイズ・位置・各バーの表示設定　width,height, top,left）	●ウインドウを指定位置に移動（moveTo）
●ウインドウを上下左右に移動（moveBy）	●前に表示したページに戻る（history.back, history.go, history.forward）
●リダイレクト（window.location）	●一定時間後に指定のページに移動（setTimeout）
●一定時間ごとに再読み込み（setInterval, location.reload）	●アドレス統一（location.href, match, replace）
●アドレス統一（複数アドレス統一）	●フレーム内のページへの直接アクセス時にフレームページへ転送（top.frames.length）
●フレームページ内に読み込まれた場合にフレームを解除（top.location）	●一定時間ごとに背景色を変える（setInterval, document.bgColor）
●一定時間ごとに背景色を変える（setInterval, document.bgColor, charAt）	●見るたびに背景色を変える（Math.random,document.bgColor）
●背景色を選択（onChange, document.bgColor）	●一定時間ごとに背景画像を変える（document.body.background）
●見るたびに背景画像を変える（Math.random, document.body.background）	●クリックで文字サイズを変更（style.fontSize）
●文字スタイル変更（color, fontWeight, fontStyle, textDecoration, fontFamily）	●マウスを追いかける文字（pixelLeft, pixelTop, event.x, event.y）
●クリックで拡大・縮小できる画像（pixelWidth, pixelHeight）	●画像の重ね合わせ順序変更（zIndex）
●フェードイン画像（filters,opacity, finishOpacity）	●指定範囲内を動き続ける画像（setInterval, pixelLeft, pixelTop）
●ランダムに動く画像（Math.random, pixelLeft, pixelTop）	●キーボードの矢印キーで移動できる画像（event.keyCode）
●マウスを追いかける画像（onMousemove）	●マウスを回りながら追いかける画像（Math.cos, Math.sin）
●カーソルを自動的にフォーム入力欄に移動（focus）	●クリックするとテキストエリア内をすべて選択（select）
●入力時にテキストエリア内の初期文字列を削除（defaultValue）	●テキストエリア内をクリップボードにコピー（execCommand, Copy）
●テキストエリア内にクリップボードデータを貼り付け（execCommand, paste）	●フォーム送信時に空欄を確認（警告ダイアログ　alert）
●フォーム送信時に空欄を確認（確認ダイアログ　confirm）	●フォーム送信時に空欄を確認（文字入力ダイアログ　prompt）
●フォームリセット時に確認メッセージ（onReset, confirm）	●フォーム送信時に空欄を確認・空欄の色を変更（elements, borderColor, background）
●日付を表示（new Date, getFullYear, getMonth, getDate, getDay）	●時刻によってメッセージを変える（getHours）
●ステータスバーに時刻を表示（getHours, getMinutes, getSeconds）	●ステータスバーに時刻を表示（スクロール　substring）
●時刻を画像表示（new Image）	●年月日から曜日を調べる（setFullYear, setMonth, setDate）
●指定した日までの日数を表示（Date.parse）	●ページ滞在時間を計算（onLoad, onUnload, getTime）
●カレンダー	●カレンダー（前月・次月へのリンク付）
●JavaScriptの有効･無効を表示（noscript）	●クッキーの有効･無効を調べる（navigator.cookieEnabled）
●訪問回数（クッキー　document.cookie）	●フォーム入力内容をクッキーに保存（document.cookie, escape, unescape）
●お気に入りに追加（window.external.AddFavorite）	●小数点以下四捨五入・切り捨て・切り上げ（Math.round, Math.floor, Math.ceil）
●文字列エンコード・デコード（escape, unescape）	●10進数に変換（parseInt）
●2進数・8進数・16進数に変換（toString）	●文字列置き換え（replace）
●フェードイン（setInterval, document.bgColor）	●イメージマップの指定箇所で説明を表示（onMouseover）
●マウスオーバー時にメニューリストを表示（onMouseover, onMouseout, style.display）	●ステータスバーに電光掲示板風メッセージ（status, setInterval, length, substring）
●電光掲示板風メーセージ表示（setInterval, length, substring）	●おみくじ（Math.random）
●九九の勉強	●ストップウォッチ
●電卓	●スロット

かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】