2018年5月8日追記ホームページに載せた写真などの画像を位置や大きさを指定して表示し、しかもその場でスクロール、あるいは拡大、縮小などができるといいなと思ったことがあります。今回javascriptでそんなコードを書いてみました。SVG画像も試してみました。このホームページでは写真は通常下のように小さいのを掲載します。写真をマウスでクリックすると拡大画像を表示、それをもう一度クリックすると元に戻るようにしています(...自動的にそうなるようにプログラムしてあるんだ)。この方法は基本的には画面の大きなブラウザ向けで、しかもわざわざページを切り替えて表示すると何だか話がいったんとぎれるような感も否めません。時には縮小しないで元サイズのままページに載せたい場合もあります。地図、説明書きなどがいい例で、縮小してしまうと内容がよく見えませんし、わざわざ拡大する為にページを切り替えるというのも煩わしく感じます。話の流れを大事にしたいときなどもページ上の画像だけで用が済めばと思います。そんなときはページ上に適度の大きさの画像を載せますが、ときになんだか中途半端になり、小さくなったり画面から外れたりでかんじんなところがよく見れなかったりします。そのためにわざわざ写真をトリミングしたりサイズを変えたりしますがやっぱりめんどうです。そこで縮尺や位置を指定して表示できるようにし、さらにズームやスクロール機能をつけてみました。左下のボタンで拡大・縮小、スクロールなどができます。ボタンは見る邪魔をしないよう控えめに設置しました。ダブルクリックでズーム切替や中央へのスクロールなどという、な、なんと3種類のスクロールができる豪華版です。(遊びで3種類のスクロールを同時に実現などとこってしまったが(1)だけでよかったみたい。知らないとかえって混乱したりする。スクリプトの動作の選択は変更できる。)画像はこんなふうに表示されます。これは先ほどの写真:金閣寺。同じ画像だが位置と大きさをうまく指定すればこれだけでほとんどいける。日本地図...ただの白地図なんだ。京都の地図...地図はやっぱりスクロールできて周りも見れるといいね。写真:夏祭り...かんじんなところはスクロールして見てね。現行ブラウザでは、Trident/7.0、Firefox/38、Chrome/44、OPR(Opera)/31で動作確認してあります。最初HTML5感覚で書いたら少し古いMSIEでは動作せず多少後退した記述になっていますが、いちおうMSIE8(WindowsXP)でもちゃんと動作します。このころMSIEが一番HTML5対応が遅れているような気がしたのでそれ以降のブラウザではほとんどだいじょうぶでしょう。(それ以外のブラウザはないので確認してませんけど。...たまたま捨てずにあったXPが役に立った。このままとっておこう。)コードは今回phpは使わずjavascriptだけで書いてありますのでそのままホームページに設置できます。