我发现基于CSS的HTML Imagemaps可以让你做一些整洁的事情，如设置热点的风格基于：悬停，点击，访问等。但你只限于使用方块&矩形。HTML Imagemaps常规VS CSS基于

但我不认为你可以在标准的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>

来源

2011-05-20 aron

的替代maphilight是图片Mapster：http://www.outsharked.com/imagemapster/我这个插件的作者，在充分披露。与maphilight相比，它增加了相当多的功能（最初是基于它的）。

来源

2011-05-24 22:16:56

嗨jamietre，你能联系我吗？阿隆（at）simpletick（dot）com 谢谢！ – aron 2011-06-02 16:13:01

我不相信，你可以使用CSS做非矩形连杆的热点，但是，你可以使用Javascript观看某人点击图片的位置，并根据点击注册的位置发生火灾或转到网址。或者，也许使用HTML5画布，你可以注册一些奇怪的形状热点？

来源

2011-05-20 18:22:32

我证实： CSS图像地图

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

标准影像地图：

他们做支撑矩形，椭圆形，圆形，多边形

如果你选择标准图片地图你可以使用这个jquery插件来控制悬停和填充颜色和边框等。 http://davidlynch.org/js/maphilight/docs/#defaults

来源

2011-05-20 18:43:46 aron

通过滥用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>

这不是边界半径是用于，但它在最现代的浏览器上运行（而不是在旧的IE外，像IE 8或更低）。

欲了解更多信息，请参见：http://www.css3.info/preview/rounded-border/

来源

2011-05-20 19:08:41

HTML Imagemaps常规VS CSS基于

回答

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

他们做支撑矩形，椭圆形，圆形，多边形

相关问题