Тег видимой области?

Question

Как сделать HTML <область /> видимым всегда, а не только в фокусе?

Кажется, должно быть таким простым:

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}

Независимо от того, что я делаю, кажется, что я никак не могу повлиять на стиль области, она действительно кажется невосприимчивой к css. Есть идеи? Кроме того, есть ли другие примеры тегов, не поддерживающих стиль?

Answer 1

Плагин jQuery, MapHilight:

Возможно, вам будет интересен плагин jQuery MapHilight (неработающая ссылка !!!).

• Демо-карта Соединенных Штатов (неработающая ссылка !!!)

Новая ссылка: https://github.com/kemayo/maphilight

Новое демо: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/

Альтернатива HTML / CSS

Я бы предложил использовать div с абсолютными ссылками внутри. Причина в том, что это очень хорошо ухудшится и покажет все опции в виде списка ссылок. Карты изображений не будут такими дружелюбными. Кроме того, эта альтернатива даст те же результаты, с более чистыми и более современными методами.

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

Answer 2

Тег area просто определяет пространство, в котором пользователь может щелкнуть, его визуальное представление отсутствует, поэтому вы не можете использовать CSS для стилизации. Мне нравится, куда вы направляетесь, но, к сожалению, вам, вероятно, придется использовать javascript для наложения прозрачного изображения поверх вашей карты изображений, чтобы выполнить то, что вы пытаетесь сделать.

Answer 3

Так что твой вопрос ударил меня по домам. Я хотел бы иметь возможность делать что-то подобное, используя теги площади, чтобы получить милые маленькие «фигуры», кроме квадрата, для областей интереса. Итак, я провел небольшое исследование, и вот что я нашел:

http://www.netzgesta.de/mapper/

Не похоже, что он будет на 100% делать то, что вы хотите, но, возможно, это отправная точка.

Answer 4

Если бы это было так просто.

Если вы хотите рисовать простые фигуры, вы можете получить их, используя элемент HTML , который используется библиотеками, такими как flot (IE требует эмулятора excanvas).

Это все еще потребует достаточного количества Javascript, но это может быть проще / эффективнее, чем возиться с наложенными изображениями, особенно если размеры ваших фигур не являются статичными. Здесь есть довольно хороший учебник .

Answer 5

Есть еще один вариант. Вы можете написать SVG. Затем вы можете увидеть форму, установив fill: green; непрозрачность заполнения: 1;

<svg height="300" width="200">
  <a xlink:href="http://stackoverflow.com/">
    <ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
  </a>
</svg>