CSS-imagemap_html/css_WEB-ITnose

画像マッピングは、オンラインで検索写真を取得します。詳細については、QQ スペースのフォト アルバムを参照してください。キャラクターのアバターにスライドすると、写真とコンテンツを組み合わせたキャラクターにタグを付けることができます。ユーザーが画像を見ると、それはもう冷たい画像ではありません。実際、コンテンツと画像のマッピングを実装するのは非常に簡単です:

HTML コード:

    <!-- 博客园-FlyElephant http://www.cnblogs.com/xiaofeixiang/ -->    <div class="group-img">        <img src="../../public/images/group.jpg" alt="合影">        <ul>            <li class="li">                <a href="http://www.cnblogs.com/xiaofeixiang/">                    <span class="outer">        	<span class="inner">        	<span class="note">李连杰</span>                    </span>                    </span>                </a>            </li>            <li class="yao">                <a href="http://www.cnblogs.com/xiaofeixiang/"> <span class="outer">        	<span class="inner">        	<span class="note">姚明</span>                    </span>                    </span>                </a>            </li>        </ul>    </div>

。

CSS コード:

    .group-img {        width: 423px;        height: 480px;        position: relative;    }        .group-img a {        position: absolute;        display: block;        text-decoration: none;        color: #000;        border: 1px solid transparent;    }        .group-img a .outer {        display: block;        border: 1px solid transparent;    }        .group-img a .inner {        display: block;        width: 100px;        height: 80px;        border: 1px solid transparent;        margin: 3px;    }        .group-img a .note {        position: absolute;        top: 100px;        left: -9999px;        background: #BDBDBD;        width: 106px;        padding: 5px;        text-align: center;        color: #fff;    }        .group-img .li a {        top: 100px;        left: 120px;    }        .group-img .yao a {        top: 8px;        left: 260px;    }        .group-img a:hover,    .group-img a:focus {        border: 1px solid #d4d82d;    }        .group-img a:hover .outer,    .group-img a:focus .outer {        border: 1px solid #00FF7F;    }        .group-img a:hover .inner,    .group-img a:focus .inner {        border: 1px solid #00CED1;    }        .group-img a:hover .note,    .group-img a:focus .note {        left: 0px;    }

CSS レイアウトで注意する必要があることが 2 つあります。 表示されないテキストは左側に表示されます。マウスをスライドすると通常に戻ります~