Fireworks CS5 のホットスポットツールの使い方

Fireworks CS5 と Dreamweaver CS5 で、ホットスポットツールを使用したページを作成したいと思います。

ホットスポットツールは、画像の特定のエリアにリンクを設定するツールです。

上の画像のように、海沿いを走る電車の写真をサンプルとして解説します。

使用する画像は、お好きな画像で構いません。

まずはツールボックスで、ホットスポットツールを選択します。

ホットスポットツールには、長方形ホットスポットツール／円形ホットスポットツール／多角形ホットスポットツールがあります。

今回は、多角形ホットスポットツールを使用します。

リンクを設定したいエリアを、ホットスポットツールで選択します。

多角形ホットスポットツールの場合は、ポイントをクリックしていきます。

水色の部分が、ホットスポットツールで選択したエリアです。

ダイレクト選択ツールで、ポイントを再調整できます。

電車の部分／線路の部分／海の部分をホットスポットツールで選択しました。

それぞれのホットスポットに、リンク／ALT テキスト／ターゲットを設定します。

リンクには、詳細情報を記載したページや、拡大画像へのリンクなどを設定します。

ALT テキストには、代替テキストを入力します。

ターゲットでは、ウィンドウの表示方法を設定します。ターゲット「_blank」の場合は、リンク先を新しいウィンドウで表示します。

ファイル／書き出しをクリックして、書き出しダイアログボックスを表示します。

ファイル名を入力します。

オプションでは、拡張子などを設定できます。ここでは、「.htm」から「.html」に拡張子を変更しました。

書き出し場所を選択したら、保存をクリックします。

書き出した画像と html ファイル

画像と html ファイルを書き出すことができました。

Dreamweaver CS5 で html ファイルを開きます。

ホットスポットツールで作成したリンクを確認できます。

コードに切り替えました。<body bgcolor="#ffffff"> では、ページの背景色を設定します。

タイトルなどに編集を加えたら、画像と html ファイルをアップロードして完了です。

難しい設定もなく、ホットスポットツールを使用したページを作成することができました。