Hatena::ブログ(Diary)

はぶろぐ

2010年02月10日 Illustratorでクリッカブルマップ(イメージマップ)をつくる

クリッカブルマップ(イメージマップ)は、細かいと作るのがめんどくさいですよね。

Dreamweaverのマップの「多角形ホットスポットツール」でちまちまやるのが大変。


そういうときはイラレでもできるのです


☆やる前の注意点

あまりパスが細かいと(特に地図)四角で処理されるようです

四角にならなくてもhtmlソースが膨大になりますからやらない方が。。

パスの単純化をしてからやりましょう

あと当たり前ながら境界線で区切っていている場合なんかはライブペイント処理してから〜

詳しくはこちら(All about Illustrator CS2・注目の新機能 ライブトレースとライブペイント)



まずIllustratorのイラストデータを開きます(作ります)。

そしてメニューバーの[ウィンドウ]から「属性」パレットを表示させておきます。


あとはパスを選択し、属性パレットの「イメージマップ:なし」になっているのを「多角形」にします。

その下にURLボックスにアドレスを入力。

新しいウィンドウで開かせたい場合は、【xxx.html" target="_blank】みたいにします。(始めと終わりの"は自動的に入るので書かなくてよし)

f:id:harukki:20100210113121j:image

そしてメニューバーの[ファイル]から「Webおよびデバイス用に保存」

いつものようにGIFの色数などを設定し[保存]、

そして最後、ファイル名を設定するダイアログボックスで、

ファイル名の設定の下にある「ファイルの種類」を[画像のみ]から[HTMLと画像(*.html)]に選択しなおします。


これでOK!


Dreamweaverで開くとこんなかんじになってます あとはalt設定とかしましょう

f:id:harukki:20100210113122j:image

地図とかよりもこうゆうイラストにぴったりとマップリンクしたい場合に便利です。