スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

dreamweaverCC ひとつの画像に対し任意の箇所に複数のリンクを貼る

クライアントサイドイメージマップ

ひとつの画像に複数のリンクを設定したい場合は、画像にマップを設定します。
画像の特定の箇所にリンクを指定する事ができます。
 


例)


ひとつの画像の中にWOMEN,MEN,KIDSという文字が入っています。
それぞれの文字付近をクリックしたらそれに対応したページにリンクされるように作成してきます。

1.画像を選択し、プロパティのマップに任意の文字を入力する。(今回はcategoryにしています)
2.マップの下に四角や丸のアイコンがあるので、四角を選択する。
3.クリックできる範囲を指定する。
  →"プロパティインスペクターの「代替」,,(中略),,提供する事ができます。" のメッセージが出るのでOKを押す。
4.プロパティのリンク欄にクリック時のリンクURLを入力する。



20140216_1.jpg

これで特定箇所にリンクを指定する事ができました。

では実際にどんなコードが作成されたのか確認してみましょう。


 <img src="images/pricedown.jpg" width="300" height="200" usemap="#category"  />
        <map name="category">
          <area shape="rect" coords="41,148,115,171" href="women.html">
          <area shape="rect" coords="116,148,182,171" href="men.html">
          <area shape="rect" coords="183,148,250,171" href="kids.html">
        </map>

画像の属性にusemap="#category" が追加されています。
mapを使用するという宣言と共にcategoryで使用するmapを紐付けています。

2行目以降の<area shape="rect" coords="41,148,115,171" href="women.html">
これは、特定箇所の座標、リンク先が指定されています。
画像の左上部分が 41,148 → 右に48px下に148px
   右下部分が115,171 →右に115px下に171px
これは四角形の場合の座標です。

三角形の場合は3辺の座標を指定しますので、数字が6個並びます。
例)<area shape="poly" coords="184,177,138,177,161,137" href="#">
丸の場合は中心部の座標と半径の長さで表すので、3個の数字が並びます。
例)<area shape="circle" coords="157,159,20" href="#">


この様にしてひとつの画像に対して任意の箇所に複数のリンクを貼る事ができました。




トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。