ＨＴＭＬ中の画像の操作

ＨＴＭＬ内に表示されている画像を拡大・縮小、画像の切替、表示・非表示などの操作に関する事項をまとめました。

このような操作では、jQuery を用いるのが便利です。その利用には、head部で
　　　　　<script src="http://code.jquery.com/jquery-latest.js"></script>
を記述しておく必要があります。

画像の操作では、画像にマウスを合わせる（マウスオーバー）やクリックして操作することが多くあります。
処理を関数で記述（this.id を "対象画像" としても同じです。）
　　　　　<img id="対象画像" src="画像ＵＲＬ" onMouseOver="関数(this.id)">
　　　　　<img id="対象画像" src="画像ＵＲＬ" onClick="関数(this.id)">
処理を img onClick内に記述
　　　　　<img id="対象画像" src="画像ＵＲＬ"
　　　　　　　onClick="
　　　　　　　　　ここに処理を記述する（複数行でよい）
　　　　　　　">
　　　　onClick="{ ～｝}" としても同じです。
一般的に関数型を勧めますが、処理が単純なときは、後者のほうが簡便なこともあります。

例１：画像の拡大（同一位置）

画像をクリックすると、拡大されます。

<script>
   function 例１(対象画像) {
        var 画像 = document.getElementById(対象画像);
        画像.width = 画像.width * 1.2;                // Ａ
    }
</script>

<p><img id="例１画像"          <!-- Ｂ -->
    src="image1.jpeg" alt="" width = "100"   <!-- Ｃ -->
    onClick='例１(this.id)'>                <!-- Ｄ -->
</input></p>

Ｂでのid="例１画像" は、関数例１への引数になるので必須です。
Ｃでは、当初を width="100" し、それをＡで１.２倍に拡大しています。
Ｃ：<img　～> は、ボタンの代わりに画像にしています。
Ｄ：onClick は「クリックしたら関数例１を実行する」です。this.id は "例１画像" としたのと同じです。

例１１　onClick内に処理を記述

処理内容は例１と同じです。

<img id="例１１" src="image1.jpeg" alt="" width = "100"
     onClick='
         var 画像幅 = this.width;  <!-- this.width は表示画像幅の意味 -->
         this.width = 画像幅 * 1.2;
     '>

例２：サムネイル画像の拡大表示

小さな画像（サムネイル画像）を並べて表示し、マウスを乗せた画像を拡大表示します。

ここに <img id="例２拡大画像表示場所"> があります。

<script>
   function 例２(対象画像, 表示場所, 倍率) {                 // Ａ
        var 元画像 = document.getElementById(対象画像);      // Ｂ
        var 拡大画像 = document.getElementById(表示場所);    // Ｃ
        拡大画像.src = 元画像.src;                           // Ｄ
        拡大画像.width = 元画像.width * 倍率;                // Ｅ
    }
</script>

<img id="例２画像１"
    src="image1.jpeg" alt="" width = "100"
    onMouseOver='例２("例２画像１", "例２拡大画像表示場所", 2)'> <!-- Ｆ -->
    <!--  : 例２画像２（image2.jpeg）について同様な記述 -->
<img id="例２拡大画像表示場所">                        <!-- Ｇ -->

Ａ・Ｅ・Ｆ：拡大倍率もＨＴＭＬで指定するようにしました。
Ｆでの「２」をＡで引数「倍率」として受け取り、Ｅで横幅を拡大しています。
Ｂ：小さい画像と拡大画像の二つがあるので、以前の「画像」オブジェクトを「元画像」と変名しました。
Ｃ・Ｇ：「例１（Ｅ）」のダミー画像に相当します。それをＣでは「拡大画像」としています。
Ｄ：これにより拡大画面に元画面が表示されることになります。
Ｅ：元画像の情報を加工して拡大画像の情報にする例です。ここでは横幅を拡大しています。

例３：サムネイル画像の拡大表示　jQuery

小さな画像（サムネイル画像）を並べて表示し、マウスを乗せた画像を拡大表示します。
例２と同じですが、jQuery を用いています。

<script type="text/javascript">
    $(function() { 
        var 拡大画像 = new Image();          // Ａ
        $("[id^='画像']").hover(             // Ｂ
            function(){
                拡大画像 = document.getElementById("拡大画像表示位置");// Ｃ
                拡大画像.src = this.src;     // Ｄ
                拡大画像.width = "200";      // Ｅ
            }, 
            function () { 
                拡大画像.width = "0";       // Ｆ
            } 
        ); 
    }); 
</script>

<p>
<img id="画像１" src="image1.jpeg" width="100" alt="">  <!-- Ｇ -->
<img id="画像２" src="image2.jpeg" width="100" alt="">
</p> 
<img id="拡大画像表示位置">       <!-- Ｈ -->

Ｇはサムネイルを並べたリストです。
id="画像１"、id="画像２"、…… のように、「このリストのなかでは先頭の文字列が共通で、リスト以外の個所でこの共通部分文字列と一致する id はない」ようにすることが重要です。
それは、Ｂのセレクタ "[id^='画像']" が「先頭が "画像" であるidをもつ個所」という意味で、「id="画像１"」や「id="画像２"」の場合をまとめて処理できるからです。
Ｂのイベントが起こった時点で、対象のサムネイル画像の情報が取り込まれています。それには、
　　　src：画像のＵＲＬ、　width：横幅、　height：高さ（単位px）
などがあります。
Ｈは「ダミー」の画像です。ここでの&li;img ～> の属性（src やwidth など）をスクリプトが埋め込むことにより、ここに拡大画像が表示されるのです。
Ａでは、画像としてのオブジェクトを「拡大画像」という名前にしました。
マウスが乗ったときは、まずＣで、Ｈのダミー画像情報を受け取ります。
Ｄでは、Ｈを&li;img src="マウスが乗った画像のＵＲＬ" >のように変更しています。
this とは「イベントが発生したときのセレクタ」の意味です。「画像１」の場合ならば、画像１.src としたのと同じです。
Ｅでにより、Ｈは&li;img src="マウスが乗った画像のＵＲＬ" width="200" >となりました。このfunctionが終了した時点で、拡大画像が表示されます。表示する個所はＣで分かっています
（ここでは「200」と数値で与えましたが、「サムネイル画像の２倍にする」のであれば、
　　　拡大画像.width = this.width * 2;
とすればよいのです）
マウスが離れたときは、Ｆにより拡大画像の横幅を０にすることにより見えなくしています。

例２との比較

ＨＴＭＬでの img 記述が簡素になります。
例２で、Ｆの機能を実現するには、「マウスが他の画像にも乗っていない」条件を記述するには複雑な処理が必要になります。
「クリックしたら」というような機能を追加するとき、例２では、img への追加と新規の関数を作成する必要がありますが、例３では、$("[id^='画像']").click( ～ ) を追加すればよいので発展性があります。

例４：画像の切り替え jQuery

ベースになる画像（image1.jpeg）が表示されており、それにマウスが乗ると代替の画像（image2.jpeg）になります。代替画像からマウスが離れるとベース画像に戻ります。

<script type="code">
    $(function(){ 
        $("#例４表示位置").hover( 
            function(){ 
                var 代替画像 = $(this).attr("src")                        // Ａ
                    .replace("image1.jpeg","image2.jpeg");  // Ｂ
                $(this).attr("src",代替画像);                        // Ｃ
            }, 
            function(){ 
                var ベース画像 = $(this).attr("src")
                    .replace("image2.jpeg","image1.jpeg"); 
                $(this).attr("src",ベース画像); 
            } 
        ); 
    }); 
</script>

<p><img id="例４表示位置" src="image1.jpeg" alt=""></p>

Ｃ：attr(属性, 値) は「属性の値を取得する」という意味です。
ここでは、「"#例４表示位置"（this）のsrcを代替画像にする」ことになり、代替画像が表示されます。
Ａ：attr(属性, 値) は「attr(属性).値を与えるメソッド」の形式にすることができます。
Ｂ：ここでは「値を与えるメソッド」を replace にしています。
replace(文字列１, 文字列２) の形式で、文字列１を文字列２に置換します。
ここでは、ベース画像のsrcを代替画像のsrcに置換しています。

例５：画像の表示・非表示

例５１：単純な表示・非表示（display）

function 例５１(対象画像) {
    var 画像 = document.getElementById(対象画像);
    if (画像.style.display != "none") 画像.style.display ="none";
    else 画像.style.display ="block";
}

<img id="例５１画像" src="image1.jpeg">
<button onClick="例５１('例５１画像')">表示/非表示（display）></button>

display: block（表示）/ none（非表示）
非表示にすると、img 領域が小さくなります。

例５２：単純な表示・非表示（visible）

function 例５２(対象画像) {
    var 画像 = document.getElementById(対象画像);
    if (画像.style.visibility != "hidden") 画像.style.visibility ="hidden";
    else 画像.style.visibility ="visible";
}

<img id="例５２画像" src="image1.jpeg">
<button onClick="例５２('例５２画像')">表示/非表示（display）></button>

visibility: visible（表示）/ hidden（非表示）
非表示にしても img 領域は変わりません。

例５３：フェードイン／フェードアウト　jQuery

ボタンをクリックすると、画像がゆっくりと表示／非表示されます。

<script>
$(function(){
    $("#例５３ボタン").click(function () {
        $("#例５３画像").toggle(5000);  // フェードの速度
    });
})
</script>

<button id="表示ボタン">画像表示</button><br>
<img id="例５３画像" src="image1.jpeg" alt="">

ＨＴＭＬ中の画像の操作

例１：画像の拡大（同一位置）

例１１ onClick内に処理を記述

例２：サムネイル画像の拡大表示

例３：サムネイル画像の拡大表示 jQuery