Видимый тег области?
Как я делаю 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. Какие-либо идеи? Кроме того, какие-либо другие примеры тегов un-style-able?
4 ответа
jQuery Plugin, MapHilight:
Здесь вы можете найти jQuery плагин MapHilight (мертвая ссылка!!!), который представляет интерес.
- Карта американской демонстрации (мертвая ссылка!!!)
Новая ссылка: https://github.com/kemayo/maphilight
Новая демонстрация: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/
HTML/CSS Alternative
Я бы предложил использовать 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>
Тег area просто определяет пространство, в котором пользователь может щелкнуть, его нет визуального представления, поэтому вы не можете использовать CSS для его стилизации. Мне нравится где ты
Итак, твой вопрос попал ко мне домой. Я бы хотел иметь возможность сделать что-то подобное, используя теги областей, чтобы получить хорошие маленькие "формы", кроме квадрата для областей, представляющих интерес. Итак, я провел небольшое исследование и вот что я нашел:
http://www.netzgesta.de/mapper/
Не похоже, что это на 100% сделает то, что вы хотите, но, возможно, это и есть отправная точка.
Если бы это было так просто.
Если вы хотите нарисовать простые фигуры, вы можете добраться туда, используя HTML
Для этого все равно потребуется достаточное количество Javascript, но это может быть проще/эффективнее, чем возиться с накладными изображениями, особенно если размеры ваших фигур не статичны. Есть довольно хорошее учебное пособие здесь.
.