イメージマッピング(クリティカルマッピング)
■メリット
・1つの画像の中で別の場所でリンクを設けたいときに使います
・1つ1つ、異なる形状のリンクを作成することが出来ます
■やり方(reanweaverを使った例)
①画像を用意します。
②表示形式を「分割」にし、右の下矢印を押して「デザイン」を選択します。
③imgタグで画像を挿入します
④「ウィンドウ」→「プロパティ」でプロパティを表示します。
⑤対象の画像をクリックすると下のプロパティに情報が出てきます。
通常時は矢印が選択されているのですが、
隣を選択するとそれぞれ
四角形・円・多角形を作成することができます。
例えば四角形を選択し、四角形を書くと自動的にコードを記載してくれます。
1 2 3 4 5 6 |
<img src="http://www.clarenet.co.jp/column/engineer/wp-content/uploads/2018/06/5.jpg" alt="" width="1680" height="1050" class="alignnone size-full wp-image-837" /> <img src="img/180614.jpg" usemap="#Map"> <map name="Map"> <area shape="rect" coords="225,44,395,202" href="#"> </map> |
⑥hrefを記載できるようになるため、リンクを貼り付けることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>イメージマップ(クリッカブルマップ)の練習</title> </head> <body> <img src="img/180614.jpg" usemap="#Map"> <map name="Map"> <area shape="rect" coords="225,44,395,202" href="http://www.clarenet.co.jp/column/engineer/" target:_blank> </map> </body> </html> |
完成したものがこれです。
四角形をクリックしてみましょう。
使う場面はたくさんあると思います。
コメント