Dreamweaver CCでイメージマップを作成する

Dreamweaver CCイメージマップを作成する流れをメモ。

作成方法

DreamweaverでHTMLファイルを開きます。
ワークスペースの表示が「デベロッパー」になっている場合は、ウィンドウ > ワークスペースのレイアウト から「標準」を選択しておきます。

create-a-dreamweaver-cc-image-map01

挿入 > Image で画像を選択して挿入します。

create-a-dreamweaver-cc-image-map02

上部の「分割」と「デザイン」を選択しておきます。

create-a-dreamweaver-cc-image-map03

ウィンドウ > プロパティ を選択して、プロパティインスペクタを開きます。

create-a-dreamweaver-cc-image-map04

imgタグをクリックするか、プレビューの画像をクリックして画像を選択します。

create-a-dreamweaver-cc-image-map05

プロパティインスペクタのマップにイメージマップ名を入力します。

create-a-dreamweaver-cc-image-map06

ホットスポットツールを選択して、イメージマップの範囲を選択します。
ホットスポットツールには長方形ホットスポットツール、円形ホットスポットツール、多角形ホットスポットツールの3種類があります。

create-a-dreamweaver-cc-image-map07

今回は多角形ホットスポットツールで範囲を選択しました。
imgタグの下にmapタグが生成されました。

create-a-dreamweaver-cc-image-map08

イメージマップのデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年4月
 123456
78910111213
14151617181920
21222324252627
282930