swelldesign

Webデザイン HTML Javascript Jqueryなどに関する解決策をメモとして紹介するブログです。

IllustratorCS2で行うクリッカブルマップの方法

スウェルデザインのWです。

 

今日はイラレCS2でクリッカブルマップの座標を取る方法を投稿します。

 

1. まず、座標を取りたい形のパスを用意し選択します。

取りたい座標の範囲を選択、複数が組み合わさっている場合は複数のオブジェクトを選択してください。

(※ただしそれぞれのパスの始点が終点で繋がっている事)

(※表示されているレイヤーも画像出力指定ますので

必要のないレイヤーは隠しておくこと)

 

2. 属性タブをクリックしてイメージマップを『多角形』に選択し

URL:の部分に解りやすく英数で名前を付けます(今回は『test.html』と入力)

f:id:swelldesign:20150702100544p:plain

3. 入力が完了したら『ファイル』>『Web用に保存』または、『Ctrl+Shift+Alt+S』でWeb用に保存します。

プリセットで形式を『PNG』など(自由ですが、ベクター線を画像にする時はPNGだと美しいです)に設定し保存をクリックします。

4. 保存先を指定する小窓が出たら、設定の項目で『HTMLと画像(*html)』を選択し

保存をクリックします。

5. 保存先にHTMLファイルが出来ますのでそれをブラウザで開き、確認して正常にリンクの形ができていれば成功です。

後はエディタで開き座標のコードをゲットしてください。

 

以上です。

ありがとうございました。