jQuery Image map альтернатива

Какова альтернатива использованию карт изображений? Недавно я увидел вопрос, и кто-то сказал: "Почему люди все еще используют карты изображений?"и я хотел знать хорошее CSS или JavaScript решение, чтобы увидеть для себя, если его лучше использовать, чем изображение карты.

537   5  

5 ответов:

CSS-это способ работы с картами изображений. Вы можете легко расположить ссылку с нужной шириной и высотой над любой областью изображения, изменив значения ширины и высоты в левом верхнем углу.

Проверьте рабочий пример на http://jsfiddle.net/DBvAY/1/

В Примере наведите курсор мыши на лицо ребенка или красный свет на изображении. Чтобы изменить положение якорей, все, что вам нужно сделать, это изменить верхние и левые свойства #pos1 и #pos2. То же самое касается ширины и высоты из ограничительной коробки. Все сделано с помощью CSS без javaScript.

7  
2011-03-04 09:35:34

Вам нужно только поставить ID на якоря, дивы не требуются.

2  
2013-03-27 12:32:28

Если ваш сайт является адаптивным, вы можете попробовать использовать SVG в качестве отличной альтернативы картам изображений.

SVGs можно легко сделать отзывчивыми, а также реагировать на эффекты наведения и т. д.

Это хорошая статья , в которой обсуждается этот вопрос.

2  
2017-02-27 10:23:56

Как ответ Хусейна. Я просто добавляю свои замечания и делюсь с вами некоторыми ссылками в лихорадке использования карты изображений.

  1. Вы можете расположить изображение не только как квадрат, но также как прямоугольник и даже многоугольник.
  2. Вы можете добавить свой вывод желания во всплывающем экране, наведя указатель мыши на позицию/ и даже вы можете выполнить действие, а также.

Чтобы получить больше, пожалуйста, посетите эти ниже linkshelp полный

link 1imagemapster

link 2imagemapster-решения

Вы можете погуглить его как изображение mapster для получения дополнительной информации. спасибо

1  
2014-10-29 16:27:54

Это расширяет ответ Хусейна и делает его масштабируемым в адаптивном дизайне. Также вы можете сделать различные простые фигуры из CSS с помощью transform. Чтобы найти приблизительное положение ( % ), вы можете получить справку из этой страницы.

Вот пример: 

html, div, p, a {
  font-family: arial;
}
.map-image {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.map-image img {
  width: 100%;
  height: auto;
  display:block;
}
.map-image a {
  text-decoration: none;
  padding: 5px;
  color: #FFF;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 4vw;
}
.map-image a:hover {
  border: 1px solid #FFF;
  margin: -1px;
}
.map-image a.rotate {
  border-radius: 50%;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
  transform: rotate(20deg);
}
.map-image a.rotate span {
  position:absolute;
  -ms-transform: rotate(-20deg); /* IE 9 */
  -webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
  transform: rotate(-20deg);
  top:25%;
}
.map-image a.skew {
   border-radius: 15%;
   -ms-transform: skewX(-20deg) rotate(9deg);
   -webkit-transform: skewX(-20deg) rotate(9deg);
   transform: skewX(-20deg) rotate(9deg);
}
.map-image a.skew span {
  position:absolute;
  -ms-transform: skewX(20deg) rotate(-9deg);
  -webkit-transform: skewX(20deg) rotate(-9deg);
  transform: skewX(20deg) rotate(-9deg);
  top:12%;
  left:4%;
}
.map-image svg {
  position:absolute;
}
.map-image polygon:hover {
  stroke: #FFF;
}
.map-image .poligon-title {
  position:absolute;
  left:19%;
  top:43%;
  color: #FFF;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 2.6vw;
  z-index:100;
}
<div class="map-image">
  <img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
  <a href="https://www.google.com" title="Front window" style="position: absolute; left: 24.4%; top: 16.3%; width: 33.3%; height: 25.39%; z-index: 99; background-color:rgba(255,0,0,0.3);" class="skew"><span>Google</span></a>
  <a href="https://www.facebook.com" title="Seats" style="position: absolute; left: 58%; top: 0.16%; width: 28.4%; height: 26.33%;  z-index: 96; background-color:rgba(0,255,255,0.2);">Facebook</a>
  <a href="https://www.linkedin.com/" title="Wheel" style="position: absolute; left: 43%; top: 57.4%; width: 20%; height: 39.34%; z-index: 99; background-color:rgba(0,255,0,0.2);" class="rotate"><span>Linkedin</span></a>
  <svg height="auto" width="34%" style="position: absolute; left: 10%; top: 36%;  z-index: 99;" viewBox="0 0 450 600">
<a id="anchor" xlink:href="https://stackoverflow.com" target="_top">
  <polygon points="190,5 385,60 210,320 0,300 200,134 205,120 205,104" style="fill:rgba(0,0,0, 0.4);stroke-width:1" />
  Sorry, your browser does not support inline SVG.
  </a>
</svg>
<div class="poligon-title">Stackoverflow</div>
</div>

(смешивание с SVG polygon немного экспериментально)

0  
2017-08-14 11:32:32

Comments

    Ничего не найдено.
Click here to cancel reply.