NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

Illustratorで複雑なイメージマップを作る

bell賞味期限切れコンテンツ

この記事は公開または最終更新から576日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

主に地図などから地域をクリックして該当ページに飛ばすなんてときに役立ちそうなネタです。

イメージマップって毎回座標を指定したりするのが面倒なんですよね。

ですが、この方法を使えば簡単にイメージマップを作れます。

便利なんだけど滅多にそんな案件は来ないので次来た時わすれててもいいようにメモ。

やりかた

今回は以前とある案件で使用した日本地図を例に進めてみます。

japan2-01

まずはとりあえず、Illustratorで地図を書きましょう。または完成してる地図を開きます。

続いて、「属性パネル」でイメージマップの設定をします。出ていない場合は「ウィンドウ」メニューにあるので開きます。

開いたら設定をしたいオブジェクトを選択肢ます。

illustrator_createmapその前に、属性パネルに「塗りにオーバープリント」と「線にオーバープリント」しか出ていない場合は、右上の端っこにあるメニューボタンから「すべてを表示」をクリックします。

イメージマップという項目が出てくるので、「多角形」を選択、URLに飛び先URLを指定しますが、この時点で未定ならば、どのエリアか分かるような名前を適当につけておきましょう。

マップ化しないならイメージマップを「なし」にします。

あとはこれを必要な分だけ繰り返します。

完了したら、「ファイル」メニューから「書き出し」を選択し、ファイル形式にJPEG(jpg)を選択し、「書き出し」をクリックします。

illustrator_createmap_1

書き出しの設定が現れますので、「イメージマップ」にチェックし、HTMLにマップを埋め込む場合は、「クライアント側 (.html)」を選択します。

illustrator_createmap_2

あとは保存するだけです。

自動的にjpgファイルと、下記のような素っ気ないHTMLが作成されます。

(コードを一部修正しました)

あとはこれを目的のHTMLに移植して、リンク先を再設定すれば完了です。

※CCだとうまくいかないようで、以下のように全て shape=”rect” となってしまうようです。(2014は試してません)(2014でもダメでした)

Dreamweaverのようなマップ領域を視覚化できるソフトでも地図なんかはちまちまと設定するのは面倒ですので、Illustrator形式のデータがあるならば一気にマップの設定までやってしまったほうがぐっと楽になります。

地図以外でもなんか複雑な図形を形通りにクリックできるようにしたい場合はこちらのほうが楽なんじゃないでしょうか?

これ、機能自体は結構前からあるようですが、結構便利な割に周囲にはあまり知られてない機能だったのですが、マイナーなのかな?それともイラレでそういう仕事をする人があまりいないのかな??

 

追記

イラストレータが書き出すマップHTMLのコードが間違えていたので修正しました。
記事内でも追記していますが、CCではこの方法はうまくいかないようです。(CC2014は未だにアップデートしてないため現時点では不明です)

追記2

CC2014にアップしてみたんですがやっぱりうまくいきませんでした。
うーん。なんなんだろうなぁ…。

TAGS
  • 名無し

    アップありがとうございます。お教えのとうりの方法の他に、イラストデーターにファイヤーワークスのようなクリッカブルマップの領域指定が貼ってありました。可能なのでしょうか?

    • negi

      名無しさん、コメントありがとうございます。
      すみません、「ファイヤーワークスのようなクリッカブルマップの領域指定」というのがどういったものをさすのかがイメージできなかったのですが、Illustratorでクリッカブルマップを作る方法は、自分はこの方法しかわからないです。

      もしFirerowksのホットスポットのような複雑な領域指定のことを指しているのであれば、バージョンによってはうまくいかないみたいです。(すこし記事を修正しました)

Pingback / Trackback