【CSS】イメージマップ(クリッカブルマップ)の作成方法サンプル
CSSクリッカブルマップを利用したページ内リンクのサンプルを作ってみました。
【CSS】
1 2 3 4 5 6 7 8 |
.image_map{position:relative;width:500px;height:100px;background:url(sample.gif) 0 0 no-repeat;} .area1{position:absolute;top:0;left:0;width:100px;height:100px;} .area2{position:absolute;top:0;left:100px;width:100px;height:100px;} .area3{position:absolute;top:0;left:200px;width:100px;height:100px;} .area4{position:absolute;top:0;left:300px;width:100px;height:100px;} .area5{position:absolute;top:0;left:400px;width:100px;height:100px;} |
【HTML】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="image_map"> <a href="#page_link1" class="area1" alt="ボタン1"></a> <a href="#page_link2" class="area2" alt="ボタン2"></a> <a href="#page_link3" class="area3" alt="ボタン3"></a> <a href="#page_link4" class="area4" alt="ボタン4"></a> <a href="#page_link5" class="area5" alt="ボタン5"></a> </div> <div> <div id="page_link1">リンク先1</div> <div id="page_link2">リンク先2</div> <div id="page_link3">リンク先3</div> <div id="page_link4">リンク先4</div> <div id="page_link5">リンク先5</div> </div> |
ディスカッション
コメント一覧
まだ、コメントがありません