Question

我有一个包含5张图片的网站。

我正在尝试将“usemap”用于我的第5号图像，其中有两个带有两个链接的图标。

我不知道我必须使用哪个代码以及放置此代码的位置。

我找到了很多解决方案，但它们并不合适，而且我没有足够的CSS知识来应用。

感谢

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                overflow: hidden;
                background: url(bg.png) repeat;
            }
            nav{
                position: absolute;
                top: 20px;
                left: 20px;
                z-index: 100;
            }
            nav ul{
                list-style: none;
            }
            .link-1{
                background: url('ico_1.png') no-repeat top left;
                width: 32px;
                height: 32px;
            }
            .link-1.link-active{
                background: url('ico_1_active.png') no-repeat top left;
            }
            .link-2{
                background: url('ico_2.png') no-repeat top left;
                width: 32px;
                height: 32px;
            }
            .link-2.link-active{
                background: url('ico_2_active.png') no-repeat top left;
            }
            .link-3{
                background: url('ico_3.png') no-repeat top left;
                width: 32px;
                height: 32px;
            }
            .link-3.link-active{
                background: url('ico_3_active.png') no-repeat top left;
            }
            .link-4{
                background: url('ico_4.png') no-repeat top left;
                width: 32px;
                height: 32px;
            }
            .link-4.link-active{
                background: url('ico_4_active.png') no-repeat top left;
            }
            .link-5{
                background: url('i-contact-hover.png') no-repeat top left;
                width: 32px;
                height: 32px;
            }
            .link-5.link-active{
                background: url('i-contact-active.png') no-repeat top left;
            }
            .container{
                width: 100%;
                height: 100%;
            }

            /*@media screen and (max-width: 640px) {
                .section{
                    width: 600px;
                }
            }

            @media screen and (max-width: 800px) {
                .section{
                    width: 700px;
                }
            }

            @media screen and (max-width: 1024px) {
                .section{
                    width: 900px;
                }
            }

            @media screen and (max-width: 1200px) {
                .section{
                    width: 1100px;
                }
            }

            @media screen and (min-width: 1600px) {
                .section{
                    width: 1500px;
                }
            }*/

            .section{
                width: 900px;
            }

            .section-1{
                position: absolute;
                top: 0px;
                left: 0px;
                height: 640px;
                background: url(section_1.png) no-repeat top center;
            }
            .section-2{
                position: absolute;
                top: -900px;
                left: 1800px;
                height: 640px;
                background: url(section_2.png) no-repeat top center;
            }
            .section-3{
                position: absolute;
                top: -1200px;
                left: 300px;
                height: 640px;
                background: url(section_3.png) no-repeat top center;
            }
            .section-4{
                position: absolute;
                top: 250px;
                left: 1800px;
                height: 640px;
                background: url(section_4.png) no-repeat top center;
            }
            .section-5{
                position: absolute;
                top: 900px;
                left: -300px;
                height: 640px;
                background: url(section_5.png) no-repeat top center;
            }
            .sp-canvas{
                display: none;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#section-1"><div class="link-1 link-active"></div></a></li>
                <li><a href="#section-2"><div class="link-2"></div></a></li>
                <li><a href="#section-3"><div class="link-3"></div></a></li>
                <li><a href="#section-4"><div class="link-4"></div></a></li>
                <li><a href="#section-5"><div class="link-5"></div></a></li>
            </ul>
        </nav>
        <div class="container">
            <section class="section section-1">

            </section>
            <section class="section section-2">

            </section>
            <section class="section section-3">

            </section>
            <section class="section section-4">

            </section>
            <section class="section section-5">

            </section>
        </div>

如何使用css usemap？

0 个答案: