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

Question

ferles @ferles

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

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

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

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

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

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

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

Ответы на вопрос 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 штук):

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

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

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

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

CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- вчера
- 147 просмотров
1

ответ
HTML

+1 ещё

Простой
Как реализовать форму ввода как в веб-версии chatGPT?
- 1 подписчик
- 13 нояб.
- 122 просмотра
0

ответов
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 123 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Почему зависает виджет в OBS?
- 1 подписчик
- 10 нояб.
- 145 просмотров
0

ответов
CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 158 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 200 просмотров
0

ответов
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 173 просмотра
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 139 просмотров
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 105 просмотров
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 179 просмотров
0

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

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $

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

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

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

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

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

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

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

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

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