[JavaScript 実験室 にもどる]
画像ファイルの一部を拡大
下のような画像ファイルがあります。
この画像ファイルの一部(それぞれの色部分。100x100)だけを、拡大して表示したい。 そういうことはできないものかと。
CSSで書いてみる
とにかくCSSで書いてみよう。‥そう思って、作ってみたのが [これ(試作品1)]です。 画像ファイルをタテヨコ2倍にしたうえで、そのうち一色だけを 表示してます。‥へー、こんな感じでできるもんなんですね‥。
ちなみに。何をしているかといえば、まず <div class="imgx"> の中にある <img src="myimg.gif"> のところ、ここで指定された画像ファイルを 表示するわけですが、この画像ファイルを幅800px-高200px に拡大して表示、 さらに左のマージンを -200pxに設定してます。幅800pxのうち左マージンが-200px ですから、つまり、画像ファイルのいちばん左側にある赤枠(img0)は画面の左側に切れてしまい、 それゆえ緑枠(img1)がいちばん左にあるかのような表示になります。ここまでが <img src="myimg.gif"> (‥と、CSS の ".imgx img" )部分。
ここまでで表示したい緑枠(img1)の左側にある赤枠(img0)を非表示にした訳ですけど。 つづいて右側にある青枠(img2)、紫枠(img3)を非表示にします。この際に使うのが <div class="imgx"> の部分。CSS で div の大きさを 幅200px-高200px と、 緑枠(img1)の画面表示サイズと同じサイズに設定してやり、そのうえで overflow: hidden; 設定をしてます。こうすると、CSS で設定した表示枠よりも 表示すべき画像のサイズが大きかったりした場合、ブラウザはその はみ出した部分を非表示に してくれます。これで 表示したい緑枠(img1)の右側にあった青枠(img2)、紫枠(img3)が 表示されなくなります。これで「一つの画像ファイルの中の、必要な箇所だけ表示したい」という 要求を実現できます。
しかし、実際にこういうことをHTMLで行ないたい場合、どうしても 「何かをクリックするとかすれば、表示が赤に変わったり、青に変わったりする」ということを したくなるじゃないですか。(私だけ?)
そこで。それを実現するため、上で行なったことを(読みやすい)CSSで書いてしまうのではなく、 内容を比較的簡単に修正できる javascriptのdocument.write(); を使って書くように改造したのが [これ(試作品2)]です。 かなり読みにくい感じになりましたけど、実は [これ(試作品1)]と同じ内容を、 javascriptのdocument.write(); で書くように直しただけです。
動的に変化するよう書き換え
ここまでは、表示させる緑枠のサイズを 幅200px-高200px 固定にしていました。 それを、実際の環境に合わせて 表示する画像のサイズを自動調整するように 改造します。それが [これ(試作品3)]です。 ‥さらに読みにくさアップですけど、 高機能という点では、だんだん形になってきました。 (ウィンドウサイズの追尾は しません。)
そして。4つある部分のうち、どの部分を表示するか。それを指定できるように 改造したものが [これ(試作品4)]です。 「クリックによって表示部分を切り替える」というのを、どうやって実現するか? ちょっと迷うところですけど。とりあえず、古き良きCGI的な(?) 方法を取りました。 URLの最後に "?1,0" などを付けることで 表示する画像を切り替えています。 これを使うと、こんな感じに、表示する部分の切り替えができます。
[ 赤 // 緑 // 青 // 紫 ]
さらにクリックによって画像を切り替えられるよう、書き換えてみました。 まず、普通にリンクを張ってみたやつが [これ(試作品5)]で、 イメージマップを使ったのが [これ(試作品6)]です。 イメージマップのやつは、ちょっと わかりにくいかなー。 いちおう、マウスを画像上にしばらく止めておくと [Prev] とか [Back] とかの 表示は出るんですけど‥。
それと、 [これ(試作品6)]は CGIスクリプトみたいなのを JavaScript で書く感じにしてみたんですけど。 思えば、CGIスクリプト風にしなくても 同じHTML内で動的に表示画像を切り替えるのが 一番スッキリするんじゃね? と気付いて作ってみたのが [これ(試作品7)]です。 これにて改良は完結、かな??
TA [Most contents are written in Japanese Language]