CSSで作るイメージマップ[CSS]

css0908153.jpg

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>

下記図のような画像を用意します。

css0908152.jpg

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

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