
Noobcubeより、CSSで作るイメージマップの紹介です。
HTMLのマークアップは下記のようになります。ちょっと複雑な感じはありますが、リストとして設置しています。
<ul id="continents">
<li id="northamerica">
<a href="http://en.wikipedia.org/wiki/North_America">
<span>
<strong>North America</strong>
Population: 528,720,588
</span>
</a>
</li>
<li id="southamerica">
<a href="http://en.wikipedia.org/wiki/South_America">
<span>
<strong>South America</strong>
Population: 385,742,554
</span>
</a>
</li>
<li id="asia">
<a href="http://en.wikipedia.org/wiki/Asia">
<span>
<strong>Asia</strong>
Population: 3,879,000,000
</span>
</a>
</li>
<li id="australia">
<a href="http://en.wikipedia.org/wiki/Australia">
<span>
<strong>Australia</strong>
Population: 21,807,000
</span>
</a>
</li>
<li id="africa">
<a href="http://en.wikipedia.org/wiki/Africa">
<span>
<strong>Africa</strong>
Population: 922,011,000
</span>
</a>
</li>
<li id="europe">
<a href="http://en.wikipedia.org/wiki/Europe">
<span>
<strong>Europe</strong>
Population: 731,000,000
</span>
</a>
</li>
</ul>
下記図のような画像を用意します。

下記図のようなCSSを作成します。

ul#continents {
list-style: none;
background: url(images/map-color.png) no-repeat 0 0;
position: relative;
width: 580px;
height: 268px;
margin: 0;
padding: 0;
}
ul#continents li {
border: 1px solid #000;
position: absolute;
}
ul#continents li a{
display: block;
height: 100%;
text-indent: -9000px;
}
#northamerica {
width: 227px;
height: 142px;
top: 2px;
left: 0px;
}
#southamerica {
width: 108px;
height: 130px;
top: 131px;
left: 76px;
}
#africa {
width: 120px;
height: 140px;
top: 83px;
left: 209px;
}
#europe {
width: 120px;
height: 84px;
top: 1px;
left: 211px;
}
#asia {
width: 215px;
height: 175px;
top: 1px;
left: 283px;
}
#australia {
width: 114px;
height: 95px;
top: 152px;
left: 432px;
}
ホバー効果をだすために下記のようなCSSもセットすれば綺麗に動作します。
ul#continents li#southamerica a:hover {
background-position: -226px -273px;
}
ul#continents li#africa a:hover {
background-position: -209px -417px;
}
ul#continents li#europe a:hover {
background-position: -22px -427px;
}
ul#continents li#asia a:hover {
background-position: -363px -268px;
}
ul#continents li#australia a:hover {
background-position: -412px -455px;
}
コメント