複雑なイメージマップを簡単に作る方法

複雑なイメージマップを簡単に作る方法

こんにちは、引っ越しが終わって一段落したばかりのウラカワです。

そんなに使う頻度は高くないですが、
複雑なものを作ろうとするとそこそこ手間のかかるイメージマップ。

そんなイメージマップをたまたま使う機会がありましたので、
簡単に作る方法をまとめてみました。

ソースコードを生成する

Fireworksの場合

弊社ではFireworksを愛用してますので、
Fireworksでの手順をご紹介します。

①パスの調整(ポイントがカーブしている場合のみ)

まずはパスを同じ位置に複製します。
(パスの形を多少変えても問題ない場合は複製なしで結構です。)

imagemap_12

次に、複製したパスに対して「ポイントの直線化」を行います。
この作業が次のステップで重要になります。

imagemap_06

②ホットスポットの挿入

調整したパスを選択し、
ホットスポットを挿入(Ctrl+Shift+U)」を選択します。

imagemap_07

この時、ポイントがカーブしていると失敗し、
四角形のホットスポットになってしまいます。

先ほど「ポイントの直線化」を行ったのはこれを防ぐためです。

さらに、作成したホットスポットにリンク・ALTテキストを設定し、
ホットスポット用にパスを複製した場合は、余計なパスを削除します。

imagemap_08

③書き出し

「ファイル」の「書き出し(Ctrl+Shift+R)」を選択します。

imagemap_09

書き出しの設定を「HTMLと画像」にして保存すると完了です。

imagemap_10

書き出したソースコードは以下の様な感じになります。
あとは、このソースコードを好きなように調整しましょう。

imagemap_11

さすがにこれをベタ打ちは気が遠くなりますね…。
ありがとうFireworks!

Illustratorの場合

パスは基本的にIllustratorで扱うことが多いと思うので、
こちらも手順をご紹介します。

①属性の設定

属性パネルのイメージマップで「多角形」を選択し、リンク先のURLを指定します。
オブジェクトが複数ある場合は、複数選択した状態で設定すると全てに反映されます。

imagemap_01

②書き出し

「ファイル」から「書き出し」を選択します。

imagemap_02

ファイルの種類は「JPEG」を選択します。

imagemap_03

カラーモードを「RGB」にし、
「イメージマップ」にチェックを入れましょう。
後は好みで設定してOKを押すと完了です。

imagemap_04

この時、イメージマップの部分がグレーになっている時はチェック出来ません。
何かが間違っている可能性があるので見直しましょう。

では、さっそくソースを見てみましょう。

imagemap_05

多角形だと思った?残念!四角形でした!

…と言われた気分です。

パスの形をもっと単純なものにしてみたり、
色々試してみたのですがダメでした…。
CCだと多角形を選んでも何故か四角形にしかならないようです?

バグのような気がしますが、何か分かり次第追記したいと思います。

簡単にロールオーバーを実装する

実際にイメージマップを使う場面ですと、
ロールオーバーも設定しますよね。

普通にやろうとすると、areaの数が増えれば増えるほど用意する画像が増えてしまって管理も大変…!

出来ればそこも簡単に出来ないだろうか!?
そんなわがままにお応えする便利なjqueryプラグインがこちら!

ImageMapster

このプラグインを使うと、
areaがいくつだろうが用意する画像が2~3枚で済みます。

このような感じで画像に対して設定してあげるだけで簡単に実装出来ます。

チェックボックスのようにareaを複数選択することも可能のようですね。
公式サイトの方に様々なデモがあり、
見てみると面白いので何かアイデアが生まれるかもしれません。

DEMO

ちなみに、クリックしたらリンクを開きたいなーという場合は、
以下のようにonClickを設定します。

あとは各areaにhrefを設定すればOKです。

このプラグインを使うと色々と複雑なことも出来そうですね。
ぜひ使ってみてください!!

同じカテゴリー(WEB制作・デザイン)の記事