Подсветка корпусов при наведении, как?

281

26 марта 2017, 05:22

Как сделать также как на этом примере? Совсем не знаю как это делается, поэтому напишите хотя бы в какую сторону смотреть; на чистом css можно сделать такое или без js не обойтись?

пример

Answer 1

Это называется map HTML

На данный момент , всё сделано для удобства человека и так же созданы генераторы подобного , как к примеру этот : HTML MAP generator и как раз на этом сервисе я и сделал этот пример ! В сниппете сам пример

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://jquery-fckeditor-plugin.googlecode.com/svn/trunk/jquery.MetaData.js"></script> 
<script type="text/javascript" src="https://rawgithub.com/kemayo/maphilight/dd84221dec229fa5525760a1c791eb9e08f20dd3/jquery.maphilight.min.js"></script> 
<script> 
  $(function() { 
    $("img[usemap]").maphilight(); 
  }); 
</script> 
 
  <img alt="m-dom-7.jpg" src="http://mychertezhi.ru/images/modules/files/cache/shots/Stroitelstvo/Arxitect-plani/Mnogo-etazh-doma/m-dom-7.jpg" usemap="#myMap" width="450" height="318" /> 
  <map name="myMap" id="myMap"> 
        <area shape="poly" coords="146,117,278,112,280,130,144,131" class="{fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'330066',strokeOpacity:0.8,strokeWidth:1}" /> 
        <area shape="poly" coords="278,136,144,134,150,152,278,155" class="{fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'330066',strokeOpacity:0.8,strokeWidth:1}" /> 
        <area shape="poly" coords="277,162,149,160,147,177,278,179" class="{fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'330066',strokeOpacity:0.8,strokeWidth:1}" /> 
        <area shape="poly" coords="278,182,148,181,148,197,275,203,275,197" class="{fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'330066',strokeOpacity:0.8,strokeWidth:1}" /> 
        <area shape="rect" coords="276,207,152,209" class="{fill:true,fillColor:'cd3333',fillOpacity:0.4,stroke:true,strokeColor:'003333',strokeOpacity:0.8,strokeWidth:1}" /> 
        <area shape="poly" coords="278,210,150,208,149,224,272,223" class="{fill:true,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'330066',strokeOpacity:0.8,strokeWidth:1}" /> 
    </map>

Я сделал только несколько областей в многоэтажке !

p:s По хорошему если то изображение загружается в виде svg fill и уже потом ищутся координаты , для удобства пользования SVG есть отличные редакторы такие как CorelDraw inkScape и т д Лично я это делаю на обычном тетрадном листе

Answer 2

На чистом CSS:

#block { 
  width: 100px; 
  height: 100px; 
  background-image: url(http://aykinfo.ru/uploads/news/d8cf6069c56a1a5e891143ed966bf893.jpg); 
  transition-duration: 1.5s; 
} 
 
#block:hover { 
  background-image: url(http://aykinfo.ru/uploads/news/949781238d04ef7db1cb9799e6aff2e6.jpg); 
}

<div id="block"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не выходит функция .innerHTML

И в js:

244

javascript

Как сделать circle progress bar на owl-carousel?

Вообщем есть слайдер на owl-carousel 2, нужно сделать чтобы было так takems/L2Y7C тоесть dots а вокруг них крутится progress bar и снизу просто показывать какой...

282

javascript

Как разбить по группам записи на сайте?

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

235

javascript

Не могу получить значение из функции.Возвращает undifined

ДЕлаю дирекшион получаю ответ

297