久しぶりの「新館」絡みのネタになります。「新館」の「森と公園めぐり」のうち、「横浜市民の森めぐり」のページに横浜市のマップを使った各市民の森へのクリッカブルマップを付けてみました。
以前に「『花子』」で作成した横浜市のマップは、こういうふうに使われる予定だったんですね。
実は私、クリッカブルマップというのを使うのは初めてで、どうも勝手がわかりません。ですが、HTMLの範疇の話のようなので、やれば何とかなるだろうと始めました。
しかも、ASP.NETにはImageMapというサーバコントロールがあるので、これを使えばクリッカブルマップをカンタンに組み込める、ということです。
案の定、ImageMapコントロール自体の組み込みはカンタンでした。やっかいなのは、ホットスポットというクリックに反応する場所の指定です。これはいちいち座標を指定してやらねばならないので、相当面倒です。
画像を表示して、そこを範囲指定して自動的に座標を決めてくれるツールでもVisual Studioに付いていればよいのですが、そういうものはないようです。仕方がないので、Windowsに付属している「ペイント」を使用しました。
元画像を作った『花子』でやればいいじゃないかと思ったのですが、あいつはミリでしか座標を扱えないので、Web系の作業には向かないんでさ。
ペイントで画像を読み込み、範囲指定ツールにしてからホットスポットにしたい部分の左上隅にマウスカーソルを移動させますと、ステータスバーに座標が出ます。それを記録します。
そして、その一からドラッグしてホットスポットの範囲を決めます。ステータスバーに、ボックスのサイズが出ますので、それも記録しておきます。
これでホットスポットの場所決めは1個分完了です。あとは、ホットスポットの数だけ繰り返していきましょう。
ちなみにこの方法は、RectangeHotSpotすなわち矩形でしか使えません。円形などでは別の工夫が必要です。
コメント