【CSS】イメージマップ(クリッカブルマップ)の作成方法サンプル

2013年3月14日2019年3月14日

CSSクリッカブルマップを利用したページ内リンクのサンプルを作ってみました。

【CSS】


.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;}

.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】


<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>

</div>

<div>

</div>

この記事を評価してください

css

Posted by Cat Puncher