常规 HTML 图像映射 VS 基于 CSS

发布于 2024-11-08 13:29:50 字数 2429 浏览 4 评论 0原文

我发现基于 CSS 的 HTML 图像地图允许您做一些巧妙的事情，例如根据悬停、单击、访问等设置热点的样式。矩形。

但是我不相信你可以在标准 html 图像地图中做到这一点。但标准 html 图像映射的好处是可以绘制多边形、圆形。

该限制是否属实？

基于 CSS 的图像映射代码示例

<div class="imgmap_css_container" id="SeatingChartMap"><a style="position: absolute; `top: 396px; left: 565px; width: 20px; height: 43px;"  alt="A: 1: 1" title="A: 1: 1" href="11" target="" ><em>A: 1: 1</em></a><a style="position: absolute; top: 395px; left: 541px; width: 19px; height: 45px;"  alt="A: 1: 2" title="A: 1: 2" href="12" target="" ><em>A: 1: 2</em></a><a style="position: absolute; top: 392px; left: 516px; width: 21px; height: 47px;"  alt="A: 1: 3" title="A: 1: 3" href="13" target="" ><em>A: 1: 3</em></a><a style="position: absolute; top: 392px; left: 492px; width: 22px; height: 47px;"  alt="A: 1: 4" title="A: 1: 4" href="14" target="" ><em>A: 1: 4</em></a><a style="position: absolute; top: 390px; left: 469px; width: 20px; height: 48px;"  alt="A: 1: 5" title="A: 1: 5" href="15" target="" ><em>A: 1: 5</em></a><a style="position: absolute; top: 387px; left: 442px; width: 24px; height: 48px;"  alt="A: 1: 6" title="A: 1: 6" href="16" target="" ><em>A: 1: 6</em></a></div>`

标准 HTML 图像映射代码示例

<img src="rexall_place-seating-chart1561-791.gif" USEMAP="#NotNamed" BORDER=0>
<map name="NotNamed">
  <area shape="poly" coords="346,93,339,155,355,158,375,92,347,92" href="2"  alt="" title="">
  <area shape="rect" coords="305,95,332,152" href="1"  alt="" title="">
  <area shape="rect" coords="201,92,234,153" href="433"  alt="" title="">
  <area shape="rect" coords="237,92,266,154" href="4343"  alt="" title="">
  <area shape="rect" coords="272,91,300,154" href="32"  alt="" title="">
  <area shape="rect" coords="186,317,226,373" href="221"  alt="" title="">
  <area shape="rect" coords="183,443,212,477" href="11"  alt="" title="">
  <area shape="circle" coords="107,271,42" href="32"  alt="" title="">
  <area shape="poly" coords="361,230,367,241,424,239,410,202,360,229" href="2"  alt="" title="">
  <area shape="poly" coords="30,176,21,209,18,248,20,282,64,280,62,253,72,228,83,199,31,172" href="2"  alt="" title="">
</map>

原文

I found that CSS Based HTML Imagemaps allow you get do neat things like set the style of the hot spots based on: hover, click, visited, etc. But you are limited to use squares & rectangles.

However I do not believe that you can do this in the standard html image maps.
But the benefit of standard html image maps are that you can polygons, circles.

Is that limitation true?

Sample CSS Based Image Map Code

<div class="imgmap_css_container" id="SeatingChartMap"><a style="position: absolute; `top: 396px; left: 565px; width: 20px; height: 43px;"  alt="A: 1: 1" title="A: 1: 1" href="11" target="" ><em>A: 1: 1</em></a><a style="position: absolute; top: 395px; left: 541px; width: 19px; height: 45px;"  alt="A: 1: 2" title="A: 1: 2" href="12" target="" ><em>A: 1: 2</em></a><a style="position: absolute; top: 392px; left: 516px; width: 21px; height: 47px;"  alt="A: 1: 3" title="A: 1: 3" href="13" target="" ><em>A: 1: 3</em></a><a style="position: absolute; top: 392px; left: 492px; width: 22px; height: 47px;"  alt="A: 1: 4" title="A: 1: 4" href="14" target="" ><em>A: 1: 4</em></a><a style="position: absolute; top: 390px; left: 469px; width: 20px; height: 48px;"  alt="A: 1: 5" title="A: 1: 5" href="15" target="" ><em>A: 1: 5</em></a><a style="position: absolute; top: 387px; left: 442px; width: 24px; height: 48px;"  alt="A: 1: 6" title="A: 1: 6" href="16" target="" ><em>A: 1: 6</em></a></div>`

Sample Standard HTML Image Map Code

<img src="rexall_place-seating-chart1561-791.gif" USEMAP="#NotNamed" BORDER=0>
<map name="NotNamed">
  <area shape="poly" coords="346,93,339,155,355,158,375,92,347,92" href="2"  alt="" title="">
  <area shape="rect" coords="305,95,332,152" href="1"  alt="" title="">
  <area shape="rect" coords="201,92,234,153" href="433"  alt="" title="">
  <area shape="rect" coords="237,92,266,154" href="4343"  alt="" title="">
  <area shape="rect" coords="272,91,300,154" href="32"  alt="" title="">
  <area shape="rect" coords="186,317,226,373" href="221"  alt="" title="">
  <area shape="rect" coords="183,443,212,477" href="11"  alt="" title="">
  <area shape="circle" coords="107,271,42" href="32"  alt="" title="">
  <area shape="poly" coords="361,230,367,241,424,239,410,202,360,229" href="2"  alt="" title="">
  <area shape="poly" coords="30,176,21,209,18,248,20,282,64,280,62,253,72,228,83,199,31,172" href="2"  alt="" title="">
</map>

分享到QQ

分享到微博

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

发布评论

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

滥情空心 2024-11-15 13:29:50

Maphilight 的替代品是 Image Mapster： http://www.outsharked.com/imagemapster/ 我'我是这个插件的作者，完全公开。与maphilight（它最初基于它）相比，它增加了大量功能。

回复收藏 0 原文

幸福不弃 2024-11-15 13:29:50

我不相信你可以使用 CSS 做非方形链接热点，但是，你可以观察有人使用 Javascript 点击图像的位置，并根据点击注册的位置触发某些内容或转到 URL。或者也许使用 HTML5 画布您可以注册一些奇怪形状的热点？

回复收藏 0 原文

美男兮 2024-11-15 13:29:50

我确认：
基于 CSS 的图像映射

它们不支持椭圆形、圆形、多边形

标准图像映射：

它们支持矩形、椭圆形、圆形、多边形

如果您选择标准图像映射，您可以使用此 jquery 插件控制悬停和填充颜色和边框等。
http://davidlynch.org/js/maphilight/docs/#defaults

回复收藏 0 原文

这个俗人 2024-11-15 13:29:50

您可以通过滥用 border-radius 属性来制作圆形、椭圆形和一些不规则多边形。这是一个圆圈：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Document</title>
    <style type="text/css">
        #link {
            width: 100px;
            height: 100px;
            -moz-border-radius: 50px 50px 50px 50px;
            -webkit-border-radius: 50px 50px 50px 50px;
            border-radius: 50px 50px 50px 50px;
            background: blue;
            display: block;
            text-indent: -999em;
            overflow: hidden;
        }
    </style>
</head>
<body>

<h1>Test Document</h1>

<a href="http://google.com/" id="link">Google</a>


</body>
</html>

这不是 border-radius 的用途，但它适用于大多数现代浏览器（但不适用于较旧的 IE，例如 IE 8 及更低版本）。

有关详细信息，请参阅：http://www.css3.info/preview/rounded-border/

You can make circles, ovals, and a few irregular polygons by abusing the border-radius property. Here's a circle:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Document</title>
    <style type="text/css">
        #link {
            width: 100px;
            height: 100px;
            -moz-border-radius: 50px 50px 50px 50px;
            -webkit-border-radius: 50px 50px 50px 50px;
            border-radius: 50px 50px 50px 50px;
            background: blue;
            display: block;
            text-indent: -999em;
            overflow: hidden;
        }
    </style>
</head>
<body>

<h1>Test Document</h1>

<a href="http://google.com/" id="link">Google</a>


</body>
</html>

This is not what border-radius is intended for, but it works in most modern browsers (but not in older IEs, like IE 8 and lower).

For more info, see: http://www.css3.info/preview/rounded-border/

回复收藏 0 原文

~没有更多了~