Toggle(説明ページ用の画像サイズ指定)解説と実験のページ

ホーム

実行すると以下のようになります。

1.セブンは普段、ダン隊員として「ウルトラ警備隊」に勤務しています

2.hiroshiは普段、サラリーマンとして「♭$○←△#□%¥?」に勤務しています(^^;

解説

PCの画面の中に複数のウィンドウを開き、参照と作業を同時に行う・・・

たとえば、説明や解説を行うページ(まさにこのページですね)を左半分で参照しながら、 アプリケーション(ホームページ作成ソフトなど)を右半分で開いて、っといった具合に作業を行う場合。
こんな場合 説明、解説ページ側では、少しでも解りやすいようにと画像を多用します。

・・・ところが、この画像のスペースのおかげで、逆にページ全体が把握しづらくなったりすることってありますよね。

前説が長くなりましたが、こんなときのために、このデザインが選択肢に加わるかと思います。

実験

このページの構成を以下に表します。

以下にToggle(説明ページ用の画像サイズ指定)を実装する際必要になるタグや、ファイルなどをまとめてみました。

1.image_view_toggle.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="../css/hiroshi1986.css" rel="stylesheet" type="text/css" />
<link href="image_view_toggle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="image_view_toggle.js"></script>
<title>Toggle(説明ページ用の画像サイズ指定)</title>
</head>
<body>
<h1>実行すると以下のようになります。</h1>
<blockquote>
<div id="photoAlbum">
1.セブンは普段、ダン隊員として「ウルトラ警備隊」に勤務しています
<img src="img/33.jpg" class="photoSmall frame" title="クリックにてサイズを切り替えます"><br /><br />
2.hiroshiは普段、サラリーマンとして「♭$○←△#□%¥?」に勤務しています(^^;
<img src="img/44.jpg" class="photoSmall frame" title="クリックにてサイズを切り替えます">
</div>
</blockquote>
</body>
</html>
<head>タグ内の関連ファイル呼び出し
HTMLから呼び出すツリビュー関連ファイルは<head> 〜 </head>の間にパスを通して記述します。
<link href="../css/hiroshi1986.css" rel="stylesheet" type="text/css" />
<link href="image_view_toggle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="image_view_toggle.js"></script>
<body>タグ内の表示切り替え用タグ
<div id="photoAlbum">
1.セブンは普段、ダン隊員として「ウルトラ警備隊」に勤務しています
<img src="img/33.jpg" class="photoSmall frame" title="クリックにてサイズを切り替えます"><br /><br />
2.hiroshiは普段、サラリーマンとして「♭$○←△#□%¥?」に勤務しています(^^;
<img src="img/44.jpg" class="photoSmall frame" title="クリックにてサイズを切り替えます">
</div>
2.image_view_toggle.css

このファイルで縮小時と、拡大時の画像サイズを定義します。
フレームの枠もここで付けています。

また、この例では、あえて画像の位置を箇条書き行の横に固定していますが、通常の回り込み状態へ戻したい場合は、 .frame {・・・position:absolute; ← これを削除します。

/* toggleの外観定義用 */
.photoLarge {
width:300px;
height:400px;
}
.photoSmall {
width:10px;
height:14px;
}
.frame {
border:1px #338 solid;
position:absolute;
}
3.image_view_toggle.js

クリックされたら「拡大状態なら縮小」、「縮小状態なら拡大」と処理する仕組みです。

// JScript ファイル
// マウスクリックにて画像サイズを変更する(トグル)
window.onload = function(){

var root = document.getElementById("photoAlbum");
var imgTag = root.getElementsByTagName("img");
for (var i=0; i<imgTag.length; i++){
imgTag[i].onclick = function(){
var cName = this.className;
if (cName.match(/photoSmall/)) {
this.className = cName.replace(/photoSmall/, "photoLarge");
return;
}
if (cName.match(/photoLarge/)) {
this.className = cName.replace(/photoLarge/, "photoSmall");
return;
}
}
}
}