WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

一つの画像に複数のリンクを設定できるクライアントサイドイメージマップ(Dreamweaverのデザインビューでのやり方)

f:id:mmmmofu:20180223182942p:plain

デモ
http://efu.sakura.ne.jp/web/map/

Dreamweaver(CC)を開き、メニューの「表示」→「分割」→「コード-デザイン」をクリックしてチェックをつけるとデザインビューが表示される。

メニューの「ウィンドウ」→「プロパティ」をクリックしてプロパティウィンドウを表示する。

デザインビューの画面で複数リンクを設定したい画像をクリックで選択

プロパティウィンドウで任意の形のホットスポットツールを選択し、
画像内のリンクにしたい範囲をドラッグ アンド ドロップする。

ソースコードに下記のようなソースが追加されたら完了です。

    <map name="Map">
      <area shape="rect" coords="" href="">
    </map>

リンク領域の形状(shape属性)は
四角形(rect)・円形(circle)・多角形(poly)の3つ


参考サイト
digilog.client.jp