HOME| HOME > 画像の変化 > 画像に複数リンクを貼る | |||||||||||||||
画像に複数リンクを貼る |
|||||||||||||||
| 一つの画像の上に複数のリンクを貼っています。 | |||||||||||||||
| 下記のサンプルのように地図などに具体的な説明などを付けくわえたりするときに便利です。 | |||||||||||||||
| 画像の縦と横の位置を指定してリンクを設定します。 | |||||||||||||||
一つの画像に複数のリンクを貼ったサンプル |
|||||||||||||||
|
|||||||||||||||
| ●赤い印の付いた施設をクリックすると別ウィンドウが開きます。 | |||||||||||||||
| 設置方法 | |||||||||||||||
|
|||||||||||||||
 HTML記述例 |
|||||||||||||||
| 下記を<body>～</body>にコピーして貼り付けてください。 | |||||||||||||||
| あとは文字やリンク先を変更すればOKです。 | |||||||||||||||
<img src="map2.gif" border="0" usemap="#top"> <map name="top"> <area shape="rect" coords="195,111,242,133" target="_blank" href="#" alt="大丸"> <area shape="rect" coords="152,115,182,133" target="_blank" href="#" alt="心斎橋OPA"> <area shape="rect" coords="152,185,177,206" target="_blank" href="#" alt="ビッグステップ"> <area shape="rect" coords="164,297,182,312" target="_blank" href="#" alt="スポタカ"> <area shape="rect" coords="229,260,241,325" target="_blank" href="#" alt="グリコ"> <area shape="rect" coords="244,280,258,325" target="_blank" href="#"alt="かに道楽"> <area shape="rect" coords="202,55,215,66" target="_blank" href="#" alt="ルイ・ヴィトン"> <area shape="rect" coords="202,70,215,83" target="_blank" href="#"alt="シャネル"> </map> |
|||||||||||||||
| サンプルでは map2.gif とういう画像の地図を使っています。 | |||||||||||||||
| こちらでJavascriptを使った画像に変化を加えるサンプルを公開してます>> | |||||||||||||||
|
|||||||||||||||
|
|||||||||||||||
|
|
|
|||
|
 |
 |
||
