画像クリックで拡大 　　<div>タグの使い方
画像の入れ替え　　　　 　インラインフレーム

1.画像クリックで拡大する方法

方法1-画像を2つ用意し、別ウィンドウに拡大表示
　元の写真 Yukiakari.jpg（640×480VGA）を IrfanView を使って縦横25%に縮尺したものを Yukiakari25.jpg として以下に表示。双方とも photo というフォルダーに置く。


4月19日撮影　雪あかりのリング仕立て

<p><a href="photo/Yukiakari.JPG">
<img src="photo/Yukiakari25.jpg">
</a><br>4月19日撮影　雪あかりのリング仕立て</p>

この方法では、縮小画像クリックで別ウィンドウに元の画像を拡大表示する。
これは誰でもが思いつく方法である。



方法2-「LightBox」を使って同一ウィンドウに拡大表示
　LightBoxダウンロードサイトから lightbo2-master.zip を入手。解凍して下記のファイルのみ3つのフォルダーに残し、HTML作成ディレクトリに配置。
　 css　　　>lightbox.css
　 images　>close.png、 loading.gif、 next.png、 prev.png
　 js　　　　>lightbox.js、 lightbox-plus-iquery.min.js

HTMLソース <head> ～ </head>内に青色の部分を追加。且つ、<body> ～ </body>内を緑色のようにする。

<!DOCTYPE html>
<html lang="ja">
<head>
<link href="css/lightbox.css" rel="stylesheet" />
<script src="js/lightbox-plus-jquery.min.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="photo/Yukiakari.JPG" rel="lightbox" title="4月19日撮影　雪あかりのリング仕立て">
<img src="photo/Yukiakari.jpg" alt="" width="160" /></a>
</body>
</html>

写真クリックでウィンドウが同一ウィンドウ内で新たに開き拡大表示。×または枠外クリックで写真を閉じる。

Top　　Back


2.<div>タグの使い方

　<div>～</div>で囲んだ範囲をひとつのグループとして扱うことができる。例えば上記標題を

 <div id="content2"><h3>2.<div>タグの使い方</h3></div>

ように idタグとしてラベルcontent2を付与したとする。<h3>は見出しの大きさの種類。このページの最上部にあるこの標題に対応する <div>タグの使い方 の部分を <a href="#content2"> ～ </a> で囲めば、ホームページ上でクリックすると上記標題にスクロールする。
　ちなみに、ロゴ 「Top」には <a href="header">・・</a> が施されており、ロゴ 「Top」クリックで先頭の「HTML &amp; JavaScript の勉強」に戻るようにしている。アニメーション文字を以下のように <div>～</div> で囲む。

<div id="header">
<h1>　　<font COLOR="#003333" FACE="Andalus">HTML &amp; JavaScript の勉強</font></h1>
</div>



3.画像の入れ替え

方法1-画像のクリックで表示画像を切り替える

HTMLソース <body> ～ </body> 内に以下を追加

<body>
<img id="image_exchange1" onclick="changeIMG()" src="photo/BlueBajou.jpg"
　width="640" height="480" border="0" alt=""><br>
<p>　画像をクリックすると、切り替わる（ループ）
<script>
<!-- 画像を配列に格納する -->
var img=new Array();
img[1]=new Image();
img[1].src="photo/Yukiakari.jpg";
img[2]=new Image();
img[2].src="photo/LRVictoria.jpg";
img[3]=new Image();
img[3].src="photo/Rosa_laevigata";
<!-- 画像番号用のグローバル変数 初期値1 -->
var cnt=1;
<!-- 画像切り替え関数 -->
function changeIMG(){
<!-- 画像番号を進める for i=1 to 3 -->
　if (cnt == 3)
　{ cnt=1; }
　else
　{ cnt++; }
<!-- 画像を切り替える -->
　document.getElementById("image_exchange1").src=img[cnt].src;
}
</script>
</p>
</body>



　写真の部分をクリックすると、切り替わる（ループ）


方法2-ボタンのクリックで画像を入れ替える

HTMLソース 内に以下のように追加。

<body>
<script>
<!--
function showimg1(){
document.area1.src = "photo/BlueBajou.jpg";
}

function showimg2(){
document.area1.src = "photo/Rosa_laevigata.jpg";
}

function showimg3(){
document.area1.src = "photo/Yukiakari.jpg";
}
-->
</script>
<img src="photo/BlueBajou.jpg" name="area1" width="480" /><br>
　<input type="button" onclick="showimg1()" value="ブルー・バユー">
　<input type="button" onclick="showimg2()" value="ナニワイバラ">
　<input type="button" onclick="showimg3()" value="雪あかり">
</body>


方法1、2共に <script> ～ </script> 間に JavaScript のソースを記述する。


Top　　Back



4.インラインフレーム



　画像の拡大 　　画像の変更 　　説明文

上記テキストをクリックすると、下のフレーム内の文書が変更



Top　　Back


～