制作<区域>在 <map>开发过程中可见的标签

问题描述

我正在尝试使用 ，它可以帮助您.

当然可以使用 javascript 生成可见区域，可能 this jQuery 插件可以提供帮助你.

I am trying to use the <area> and <map> tags to make parts of images be links. But I don't know how to make the mapped area visible to control where it is exactly (except watching where the cursor becomes a pointer, but that's too tedious...)

So if I use the following example code, how can I make the polygon visible on top of the image in order to edit it more effectively?

I tried to add a class attribute to both the map and the area which has a border defined in CSS, but that didn't work: If I add it to the <map> tag, it's shown outside the image (next to the right bottom corner), if I add it to <area>, nothing is displayed at all.

<img src="mypicture.gif" width="300" height="200" usemap="#mymap1">
<map name="mymap1">
  <area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x">
</map>

CSS:

.x {
  border: 1px solid red;
  }

Additional remark after getting answers: I need it it to edit the link areas, those areas are not supposed to be visible all the time and also not only on hover. The Firefox addon mentioned in the accepted answer is perfect - it shows the areas all the time and even allows editing, adding additional polygon nodes etc.

解决方案

As far as I know, this is not possible. If you need to show those areas, you need to add absolute positioned elements, containing the links.

In case you only need that for development, there is a handy firefox extension, which can help you.

It is of course possible to generate visible area using javascript, probably this jQuery plugin can help you.

这篇关于制作<区域>在 <map>开发过程中可见的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！