Видимая метка области?

Как создать 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. Есть идеи? Кроме того, любые другие примеры несовместимых стилей?

Ответ 1

Плагин jQuery, MapHilight:

Здесь вы можете найти плагин jQuery MapHilight.

Карта демонстрации в США

Альтернатива 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>

Ответ 2

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

Ответ 3

Итак, ваш вопрос попал домой для меня. Мне бы хотелось сделать что-то подобное, используя теги области, чтобы получить красивые маленькие "фигуры", кроме квадрата для интересующих областей. Поэтому я сделал небольшое исследование, и вот что я нашел:

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

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

Ответ 4

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

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

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

Ответ 5

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

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