簡単!クリッカブル・マップ


クリッカブル・マップ(クライアントサイド・クリッカブル・マップ)を作るには普通は専用ソフトが必要だと言われていますが、 ここでは Internet Explorer 4だけを使って比較的簡単にクリッカブル・マップを作成する方法を紹介します。

必要なものは バージョン 4.0 以上の Internet Explorer だけです。また Cookie を使用しますので、「常に Cookie を受け入れる」設定にしておく必要があります。 そうしないと始まりません。

また、次の点を頭に入れて置いて下さい。 画像中のクリッカブル・エリアには「四角形」「円形」「多角形」の3種類があり、それぞれエリア定義の方法が異なります。

「四角形」は、正方形・長方形を問いませんが、各辺がスクリーンの枠に対して平行でなければなりません。そうでないものは、四角形であっても多角形として扱う必要があります。

「円形」は、説明を要しませんね。なるべく正円の方がうまく行きます。

「多角形」という名称はあまり適当ではありません。文字通りの多角形だけでなく、三角形や、傾いた四角形など、変則的な形はこれに属します。

では「簡単!クリッカブル・マップ」の特長を説明しましょう。「簡単!クリッカブル・マップ」では、ユーザのローカルディスク上にある指定された画像ファイルをまずブラウザ上に読み込みます。 画像形式は jpg、gif、bmp のいずれかでなければなりません。

作業は、入力欄にマップ名(半角英字であれば何でもいい)、各クリッカブル・エリアのジャンプ先ページを指定し、「四角形開始」、「円形開始」、或いは「多角形開始」を押してから、 それぞれの形に応じて各頂点をマウスカーソルでクリックしていき、「四角形終了」、「円形終了」、或いは「多角形終了」ボタンを押すだけ、という簡単なものです。 クリッカブル・エリアの座標読み込み、タグの作成は、「簡単!クリッカブル・マップ」が自動でやってくれます。

最後に「完成」ボタンをクリックすると、作業完了です。別ウィンドウが開いて、作成されたタグとテスト画像が同時に表示されます。テスト画像にマウスカーソルを近づけ、或いはクリックしてみて、 うまくできたかどうかをその場で確認することが出来ます。

「簡単!クリッカブル・マップ」は、作業を間違わず手際よくやれば、わずか数分でクリッカブル・マップを完成します。あとは作成されたタグをHTMLファイルに copy & paste するだけです。

但しあまり大きな画像ではうまく座標定義できないことがあります。「簡単!クリッカブル・マップ」はブラウザとの共同作業ですので、ブラウザのスクリーン内にクリッカブル・エリアが収まるような画像で試してみて下さい。

では早速、作業に取りかかりましょう。まず画像を読み込みます。ドライブ欄に、画像のあるドライブ(A、C など)、画像のパス欄にその画像のあるパスを、例えば Program Files/My Homepage のように複数の階層にまたがる場合は間に / を入れて入力、 最後に画像のファイル名を gazou.jpg、gazou.gif の如く拡張子付きで入力して下さい。すべて入力したら、画像読込ボタンをクリックして下さい。

ドライブ 画像のパス ファイル名   


どうです、うまくできましたか?もし何度やってもうまく行かない場合は、作業手順を誤っている可能性があります。以下の点を確認して下さい。

画像がうまく読み込まれない。

・ブラウザの設定で Cookie を受け入れる設定になっていますか?設定の変更はブラウザの「表示(V)」「インターネットオプション(O)_」から「詳細設定」タブの「セキュリティ」「Cookie」で出来ます。

・画像のパスの設定は正しいですか?例えば画像がCドライブの Program Files 内の HP フォルダーにある map.gif というファイルなら、次のように入力します。

ドライブ 画像のパス ファイル名

・画像のあるパスがわからない、というときは、「スタート」→「検索(F)」→「ファイルやフォルダ(F)」でそのファイル名を検索し、検索結果の「フォルダ名」の欄を広げてフル表示させるとわかります。

作成されたテスト画像のクリッカブル・エリアが正しく作成されない。

・作業は、左端のマップ名入力から始めて、開始ボタン → リンク先入力 → ・・・形開始 → (クリッカブル・エリアの各角をクリック) → ・・・形終了と、右へ進んでいき、最後に完成ボタンを押すという手順です。途中省略できません。 また、クリッカブル・エリアを1つ完了してから、次のエリアを最初(リンク先の入力)から、という風に、順番に行なって下さい。1つが完了しないうちに他の作業を始めてはいけません。

・同じ形が複数ある時にも、リンク先指定から、開始、座標定義(画像クリック)、完了という一連の作業を初めから繰り返します。

・マウスカーソルは矢印(arrow)形になっていますか?他の形のマウスカーソルではうまく行かないと思います。クリッカブル・エリアの各角を矢印の先端でクリックして座標定義します。

・クリッカブル・エリアの座標定義は、四角形、円形、多角形によってクリックの仕方が違います。四角形では、左上の角1回と、右下の角1回だけです。円形では、円の上の頂点1回と、下の頂点1回だけです。 多角形では、だいたい左上の角から始めて、時計とは反対周りに、各角をクリックしていき、一巡して最初の角に戻ります(最後に起点をもう一度クリックすることになります)。クリックし終えたら「・・・完了」を押します。

・画像を読み込んだとき、クリッカブル・エリアがブラウザのスクリーン内に収まっていますか?もし、はみ出るときは、「全画面表示」に切り替えて下さい。 それでもはみ出るような大きな画像は、残念ながら使用できません。

リンク先ページにジャンプできない

・テストウィンドウで、クリッカブル・エリアがハイパーリンクとなることは確認できたが、クリックしても「リンク先」で指定したページを読み込めない、という場合、あまり心配はいりません。 テストウィンドウに表示されたソースをコピーして自分のHTMLファイルに貼り付けた場合、「リンク先」はそのHTMLファイルとの関係で決まります。 例えば abc.html というリンク先が、HTMLページと同じフォルダー内にあるときは、リンク先指定を abc.html とするだけで十分です。リンク先が 別フォルダー内にあるときは、(そのフォルダー名)/abc.html と指定します。 また、他サイトの時は、http://...../abc.html のようにプロトコルから始めてフルパスで指定します。

「完了」ボタンを押すとエラーになる

・「やり直し」をクリックしたあと、一連の作業をもう一度繰り返して「完了」ボタンを押したらエラーになった、というのは、前に作成したテストウィンドウを終了せずに新しいウィンドウを開こうとしたときに起こります。 そのときは、テストウィンドウを閉じ、ブラウザの更新ボタンを押して、最初からやり直して下さい。

以上の点をクリアしても問題解決しないときは、メール↓などで問い合わせて下さい。




次のトピックは「ページを去る人に挨拶する」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで