Html 使用图像热点可以吗？在今天，这是最好的方法吗；世界是什么？_Html_Css_Imagemap

Html 使用图像热点可以吗？在今天，这是最好的方法吗；世界是什么？

html css

Html 使用图像热点可以吗？在今天，这是最好的方法吗；世界是什么？,html,css,imagemap,Html,Css,Imagemap,我有一张图片，需要分为4个部分，每个部分必须有一个链接。人们仍然使用图像热点吗我想你说的是客户端它们仍然在使用，是HTML4.01和XHTML1.1的一部分，也是当前草案的一部分它们使用简单，受所有浏览器支持，因此是在单个图像上显示“热点”的好方法。我想不出一个更好的替代方案（易用性、浏览器支持、可访问性、作为HTML规范的一部分）可以为您提供此功能在一张图像上有这样的“热点”是否可取（用户是否能发现是主要问题）是另一个问题。你可以使用图像地图，人们不喜欢它们的主要原因是因为人们经常绘

我有一张图片，需要分为4个部分，每个部分必须有一个链接。

人们仍然使用图像热点吗

我想你说的是客户端

它们仍然在使用，是HTML4.01和XHTML1.1的一部分，也是当前草案的一部分

它们使用简单，受所有浏览器支持，因此是在单个图像上显示“热点”的好方法。我想不出一个更好的替代方案（易用性、浏览器支持、可访问性、作为HTML规范的一部分）可以为您提供此功能

在一张图像上有这样的“热点”是否可取（用户是否能发现是主要问题）是另一个问题。

你可以使用图像地图，人们不喜欢它们的主要原因是因为人们经常绘制图像的一小部分，而你不知道它是链接。如果可以的话，在我看来，用图像作为链接只是在它的方面对每个图像进行包装

；它可能会损害可访问性，并且根据所使用的图像，可能会导致不可访问性

相反，我会将该图像作为背景图像

HTML 您可能需要使用更高级的CSS定位来确保这些锚元素

请澄清，通过“热点”，您指的是HTML图像地图吗？如果您将图片分割成四个单独的图片，然后使用CSS定位将它们重新组合成一张图片，您的一些用户可能会更高兴！很抱歉没有给出实际的答案，但我很惊讶在这里看到一个叫Rob Hruska的人！哈，很有趣。我以前没有见过姓氏“Hluska”，但相似之处很有趣：）。

<div id="image-hotspot">
    <a href="#small-planets">Small Planets</a>
    <a href="#big-planets">Big Planets</a>
    <a href="#the-sun">The Sun</a>
</div>

#image-hotspot {
    background:url(http://onlyfunnyjokes.com/bestoftheweb/wp-uploads/earth_planets_size_comparison.jpg);
    height:650px;
    width:385px;
}
#image-hotspot a {
    display:block;
    text-indent:-10000px; /* you could also change the opacity instead*/
                          /* as a matter of fact I suggest using the opacity technique */
                          /* the text-indent has caused me troubles in the iPad browser */
    height:216px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title >Test</title>
    <style type="text/css">
    #image-hotspot {
        background:url(http://upload.wikimedia.org/wikipedia/commons/c/c4/Planets2008.jpg);
        height:720px;
        width:1280px;
        position:relative;
        top:0px;
        left:0px;
    }
    #image-hotspot a#the-sun {
        display:block;
        text-indent:-10000px;
        height:720px;
        width:200px;
        position:absolute;
        left:0px;
        top:0px;
    }
    #image-hotspot a#mercury {
        display:block;
        text-indent:-10000px;
        height:25px;
        width:25px;
        position:absolute;
        left:225px;
        top:275px;
    }
    #image-hotspot a#venus {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:40px;
        position:absolute;
        left:265px;
        top:250px;
    }
    #image-hotspot a#earth {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:45px;
        position:absolute;
        left:325px;
        top:250px;
    }
    #image-hotspot a#mars {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:45px;
        position:absolute;
        left:383px;
        top:250px;
    }
    #image-hotspot a#jupiter {
        display:block;
        text-indent:-10000px;
        height:125px;
        width:135px;
        position:absolute;
        left:450px;
        top:225px;
    }
    #image-hotspot a#saturn {
        display:block;
        text-indent:-10000px;
        height:125px;
        width:195px;
        position:absolute;
        left:610px;
        top:225px;
    }
    #image-hotspot a#uranus {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:60px;
        position:absolute;
        left:805px;
        top:250px;
    }
    #image-hotspot a#neptune {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:60px;
        position:absolute;
        left:887px;
        top:250px;
    }
    </style>
</head>
<body>
    <div id="image-hotspot">
        <a id="the-sun" href="#the-sun">the sun</a>
        <a id="mercury" href="#mercury">mercury</a>
        <a id="venus" href="#venus">venus</a>
        <a id="earth" href="#earth">earth</a>
        <a id="mars" href="#mars">mars</a>
        <a id="jupiter" href="#jupiter">jupiter</a>
        <a id="saturn" href="#saturn">saturn</a>
        <a id="uranus" href="#uranus">uranus</a>
        <a id="neptune" href="#neptune">neptune</a>
        <!-- <a id="pluto" href="#pluto">pluto</a> -->
    </div>
</body>
</html>