Как можно такое сделать?

Question

ferles @ferles

Как можно такое сделать?

Всем привет. Надо сделать на подобии такого, но с другими изображениями
avers35.ru/natyazhnye-potolki/konfigurator-natyazh...
Была идея нарезать макет на части и через switch заменять требуемый элемент на нужный. Можно ли как- то более лаконично это реализовать?

Вопрос задан более трёх лет назад
146 просмотров

1 комментарий

Подписаться 1 Средний 1 комментарий

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 2

Комментировать

2 комментария

ferles @ferles Автор вопроса

Тобишь разбить на куски и заменять их или как? Просто нашел пример этот, тут просто подцветка наведенного элемента

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">

    <title>JS</title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
</head>
<body>
<img id="Image-Maps-Com-image-maps-2014-03-31-160814" src="http://www.vd-vd.ru/sites/default/files/storage/teaser/30a5bccec606cd58f9ac6060e71fd770.jpg" border="0" width="435" height="300" orgWidth="435" orgHeight="300" usemap="#image-maps-2014-03-31-160814" alt="" />
<map name="image-maps-2014-03-31-160814" id="ImageMapsCom-image-maps-2014-03-31-160814">
    <area shape="rect" coords="433,298,435,300" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
    <area id="neck" alt="neck" title="neck" href="http://www.image-maps.com/" shape="poly" coords="80,84,100,67,97,105,120,153,142,188,149,204,131,197,118,192,107,178,97,169,81,125,83,108" style="outline:none;" target="_self"     />
    <area id="l" alt="l" title="l" href="http://www.image-maps.com/" shape="poly" coords="106,62,104,102,120,138,156,139,184,129,191,101,184,61,145,55" style="outline:none;" target="_self"     />
    <area id="sp" alt="sp" title="sp" href="http://www.image-maps.com/" shape="poly" coords="189,62,196,94,189,127,238,127,232,99,234,61" style="outline:none;" target="_self"     />
    <area id="f" alt="f" title="f" href="http://www.image-maps.com/" shape="poly" coords="238,60,238,107,244,124,260,123,277,123,285,59" style="outline:none;" target="_self"     />
    <area id="hh" alt="hh" title="hh" href="http://www.image-maps.com/" shape="poly" coords="122,142,153,145,183,135,173,186,158,192,148,190,140,166" style="outline:none;" target="_self"     />
    <area id="cc" alt="cc" title="cc" href="http://www.image-maps.com/" shape="poly" coords="189,133,178,181,206,174,237,173,243,153,240,132" style="outline:none;" target="_self"     />
    <area id="nn" alt="nn" title="nn" href="http://www.image-maps.com/" shape="poly" coords="245,131,249,149,243,173,265,183,329,158,310,140,283,129" style="outline:none;" target="_self"     />
    <area id="kk" alt="kk" title="kk" href="http://www.image-maps.com/" shape="poly" coords="290,56,285,116,282,124,310,132,321,113,325,98,325,85,334,57" style="outline:none;" target="_self"     />
    <area id="jk" alt="jk" title="jk" href="http://www.image-maps.com/" shape="poly" coords="330,93,324,116,314,136,335,161,342,177,353,179,366,170,369,158,380,133,380,93" style="outline:none;" target="_self"     />
    <area id="ssd" alt="ssd" title="ssd" href="http://www.image-maps.com/" shape="poly" coords="339,57,330,88,357,86,381,87,386,82,382,72,371,61" style="outline:none;" target="_self"     />
    <area id="ffg" alt="ffg" title="ffg" href="http://www.image-maps.com/" shape="poly" coords="383,92,387,87,389,141,392,158,392,167,397,177,397,204,394,206,392,202,388,204,388,193,385,187,387,179,386,174,386,166,388,163,386,162,386,152,386,139" style="outline:none;" target="_self"     />
    <area id="er" alt="er" title="er" href="http://www.image-maps.com/" shape="poly" coords="52,44,60,59,57,79,51,80,42,51,40,52,39,76,35,86,32,93,22,106,12,118,2,132,2,141,3,146,9,150,17,156,30,155,49,162,57,162,65,165,79,128,77,84,70,82,72,70,71,62,64,52" style="outline:none;" target="_self"     />
    <area id="ed" alt="ed" title="ed" href="http://www.image-maps.com/" shape="poly" coords="151,196,156,216,167,214,172,191,161,196" style="outline:none;" target="_self"     />
    <area id="dfg" alt="dfg" title="dfg" href="http://www.image-maps.com/" shape="poly" coords="345,183,357,182,368,174,375,190,373,202,357,205,354,197" style="outline:none;" target="_self"     />
    <area id="hn" alt="hn" title="hn" href="http://www.image-maps.com/" shape="poly" coords="314,169,319,198,317,220,306,238,298,247,297,252,310,253,321,235,332,213,340,200,340,193,340,182,336,176,332,164" style="outline:none;" target="_self"     />
    <area id="ws" alt="ws" title="ws" href="http://www.image-maps.com/" shape="poly" coords="356,210,365,211,372,208,369,253,361,255,355,252,358,239,358,228,359,221" style="outline:none;" target="_self"     />
    <area id="vb" alt="vb" title="vb" href="http://www.image-maps.com/" shape="poly" coords="177,190,196,182,195,195,197,211,204,237,204,249,188,250,191,241,189,221,181,210" style="outline:none;" target="_self"     />
    <area id="as" alt="as" title="as" href="http://www.image-maps.com/" shape="poly" coords="150,251,166,254,170,249,168,235,168,219,155,220,155,231,154,239,154,246" style="outline:none;" target="_self"     />
    <area id="aa" alt="aa" title="aa" href="http://www.image-maps.com/" shape="poly" coords="72,164,81,163,91,166,81,137" style="outline:none;" target="_self"     />
</map>
<script>
    $('#Image-Maps-Com-image-maps-2014-03-31-160814').maphilight({strokeColor: 'ffFF00', shadow: true, shadowX: 7,
        shadowY: 7, fill: true,
        fillColor: 'FFFFFF'});
</script>
</body>
</html>

Написано более трёх лет назад

Владимир @djQuery

Вот все использованные там изображения (5 штук):

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 1 подписчик
- 12 часов назад
- 60 просмотров
1

ответ
CSS

Простой
Как добиться одинаковой ширины для определеных блоков в гриде?
- 1 подписчик
- 15 мая
- 102 просмотра
1

ответ
HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 231 просмотр
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 309 просмотров
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 126 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 342 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 738 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 696 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 355 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 685 просмотров
3

ответа
Показать ещё Загружается…

Я думаю нет, но если только на WebGl не моделировать комнату...

Answer 1 · 2019-02-05 23:16:41

а чем тебе их реализация не нравится, нажми на саму картинку для открытия в девтуле. Там используется 4 изображения с правильной альфой и заменяется тупо бэкграунд

Answer 2 · 2019-02-05 23:19:22

Там взято обычное изображение и использован jQuery плагин maplight. Особо сложного ничего нет, не так давно передирал точно с таким же изображением, где-то в архивах лежит, возможно даже отдельным модулем...

Как можно такое сделать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт