可见区域标记？ [英] Visible Area tag?

问题描述

如何制作html<

应该是这样简单的：

html：

 < img src =image.pngwidth =100 height =100usemap =＃Map/> 
< map name =Mapid =地图> 
< area shape =circlecoords =50,50,50href =＃alt =circle/> 
< / map> 
  

css：

 code> area {border：1px solid red} 
  

无论我做什么，我根本不能影响一个地区的造型，它真的似乎免疫css。有任何想法吗？还有，不可风格的标签的任何其他示例？

解决方案

jQuery插件，MapHilight：

您可能会发现 jQuery插件MapHilight 感兴趣

• 美国地图演示

HTML / CSS替代

我建议使用一个div，其中包含绝对链接。原因是，这将降级非常好，并显示所有选项作为链接列表。图像映射不会那么友好。

  #myImage {
 position：相对; width：640px; height：100px; 
 background-image：url（bkg.jpg）; 
} 
 a.apples {
 display：block; position：absolute; 
 top：0; left：0; width：100px; height：100px; 
 border：1px solid red; 
} 
 a.taters {
 display：block; position：absolute; 
 top：0; left：200px; width：25px; height：25px; 
 border：1px dotted orange; 
} 
 #myImage a span {
 display：none; 
} 
  

-

 < div id =myImage> 
< ul> 
< li>< a href =page1.htmlclass =apples>< span>苹果< / span>< / a>< / li& 
< li>< a href =page2.htmlclass =taters>< span> Taters< / span>< / a>< / li& 
< / ul> 
< / div> 
  

How do I make an html < area /> visible at all times, not just on focus?

Seems it should be as simple as this:

html:

<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>

css:

area {border: 1px solid red}

No matter what I do, it seems I cannot affect the styling of an area at all, it genuinely appears immune to css. Any ideas? Also, any other examples of un-style-able tags?

解决方案

jQuery Plugin, MapHilight:

You might find the jQuery plugin MapHilight to be of interest here.

• Map of the United States Demo

HTML/CSS Alternative

I would suggest using a div, with absolute links within. The reason being, this will degrade very nicely and show all of the options as a list of links. Image maps won't be so friendly. Furthermore, this alternative will deliver the same results, with cleaner and more modern practices.

#myImage {
  position:relative; width:640px; height:100px; 
  background-image:url("bkg.jpg");
}
a.apples {
  display:block; position:absolute; 
  top:0; left:0; width:100px; height:100px;
  border:1px solid red;
}
a.taters {
  display:block; position:absolute;
  top:0; left:200px; width:25px; height:25px;
  border:1px dotted orange;
}
#myImage a span {
  display:none;
}

--

<div id="myImage">
  <ul>
    <li><a href="page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>

这篇关于可见区域标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！