使用图像热点可以吗?这是当今世界最好的方法吗?

发布于 2024-09-13 23:07:45 字数 46 浏览 7 评论 0原文

我有一张图片需要分成4部分,每个部分必须有一个链接。 人们还在使用图像热点吗?

I have a picture that needs to be split into 4, and each part must have a link.
Do people still use image hotspots?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

爱殇璃 2024-09-20 23:07:45

我假设您正在谈论客户端图像地图

它们仍在使用,并且是 HTML 4.01 和 XHTML 1.1 的一部分,并且也在当前的 HTML 5 草案。

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

在单个图像上设置这样的“热点”是否可取(用户的可发现性是主要问题),是一个不同的问题。

I am assuming you are talking about client side image maps.

They are still being used and are part of HTML 4.01 and XHTML 1.1, and also in the current HTML 5 draft.

They are simple to use and are supported by all browsers and as such are a good way to have "hot spots" on a single image. I can't think of a single better alternative (ease of use, browser support, accessibility, being part of the HTML spec) that will give you this functionality.

Whether having such "hot spots" on a single image is advisable (discoverability by the user being the main issue), is a different question.

痞味浪人 2024-09-20 23:07:45

在我看来,使用图像作为链接是蹩脚的;它可能会损害可访问性,并且根据所使用的图像,可能会导致神秘肉导航,是蹩脚的。

相反,我会将该图像设为背景图像。

HTML

<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>

CSS

#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;
}

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

附录

这是另一个看起来更相关的例子:

#image-hotspot {
  /* backup url */
  /* background: url(https://i.sstatic.net/ajt0f.jpg); */
  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;
}
<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>

Using images as links is lame in my opinion; it can hurt accessibility, and depending on the image used, can result in Mystery Meat Navigation, which is lame.

Instead, I'd make that image a background image.

HTML

<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>

CSS

#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;
}

You might need to use more advanced CSS positioning to make sure those anchor elements <a> are where you need them to be.

Addendum

Here's another example which should seem more relevant:

#image-hotspot {
  /* backup url */
  /* background: url(https://i.sstatic.net/ajt0f.jpg); */
  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;
}
<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>

誰ツ都不明白 2024-09-20 23:07:45

您可以使用图像映射,人们不喜欢它们的主要原因是因为人们经常映射图像的一小部分,而您不知道这是一个链接。如果可以的话,只需将每个图像包裹起来 img

You can use image maps, the main reason people don't like them is because people often map a small part of an image and you don't know it's a link. If you can, just wrap the each image in it's respect <a href='link'>img</a>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文