Как создать и выделить области на изображении?
В фигме есть изображение карты, в интерфейсе, карта будет синяя с границами областей, на этой карте будут выделяться области, допустим голубым цветом, на которые наведен курсов, и в зависимости от того на какой части карты hover, будет выводится соответствующая информация. Ну и точки(иконки или текст) на изображении, я для примера только Алматы добавил, но по сути они будут по всей карте, в конкретных местах, без смещения. И информация в десктоп режиме будет стрелочкой тянуться от этих точек.
Может кто знает, какой либо из этих пунктов, где можно посмотреть, что почитать?
Дополнительно:
У вас в макете SVG, её и используйте
Ответы:
Экспортируй элементы в SVG, каждую область отдельно, судя по скрину, это позволяет тебе сделать. Вывести все области поочередно в контейнере и позиционировать так, что бы получилась карта:
<div class="map-conteiner"> <div class="map-item"> <div class="map-item"> <div class="map-item"> <div class="map-item"> <div class="map-item"> <div class="map-item"> </div> |
<div class="map-conteiner"> <div class="map-item"> <div class="map-item"> <div class="map-item"> <div class="map-item"> <div class="map-item"> <div class="map-item"> </div>
Выведи элементы через псевдоклассы ::before или ::аfter с помощью mask-image при таком выводе svg цвет меняется за счет background-color. Потом через hover меняй цвет за счет background-color, плавности даст transition + Для карты еще можно добавить небольшое увеличение этой области с transform scale. Будет плавно меняться цвет и увеличение небольшое при hover.
Пример мой записи для псевдокласса:
.you-class::before { content: ''; display: block; position: absolute; width: 15px; height: 15px; top: 0px; left: 0px; background-color: blue; -webkit-mask-image: url('/image/map-item.svg'); mask-image: url('/image/map-item.svg'); transition: 0.3s; } .you-class:hover::before { background-color: #E6372A; transform: scale(1.1) } |
.you-class::before { content: ''; display: block; position: absolute; width: 15px; height: 15px; top: 0px; left: 0px; background-color: blue; -webkit-mask-image: url('/image/map-item.svg'); mask-image: url('/image/map-item.svg'); transition: 0.3s; } .you-class:hover::before { background-color: #E6372A; transform: scale(1.1) }
Далее, вывод информации внизу, тут используй JS, самое просто найти условие Jquery показать/скрыть контент при наведении курсора, таких пример масса, к примеру:
$(document).ready(function(){ $('#block_1').mouseover(function(e){ $('#block_2').show(); }); $('#block_1').mouseout(function(e){ $('#block_2').hide(); }); }); |
$(document).ready(function(){ $('#block_1').mouseover(function(e){ $('#block_2').show(); }); $('#block_1').mouseout(function(e){ $('#block_2').hide(); }); });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания и выделения областей на изображении можно использовать различные инструменты и программы, в зависимости от ваших потребностей и уровня навыков. Ниже приведены несколько способов, которые могут быть полезными в этом процессе:
1. Использование графических редакторов:
- Adobe Photoshop: Вы можете использовать инструменты выделения, такие как "Маркер", "Лассо" или "Магическая палочка", чтобы выделить нужную область на изображении. После этого вы можете применить различные эффекты к выделенной области.
- GIMP: Это бесплатная альтернатива Photoshop, которая также имеет инструменты выделения и редактирования изображений.
2. Использование онлайн-сервисов:
- Pixlr: Этот бесплатный онлайн-редактор изображений также предлагает инструменты выделения и редактирования.
- Canva: Этот онлайн-сервис предоставляет возможность создавать дизайны с выделенными областями на изображениях.
3. Использование библиотек и плагинов для программирования:
- Для языка программирования PHP вы можете использовать библиотеку GD, которая позволяет работать с изображениями и создавать области на них. Ниже приведен пример кода на PHP с использованием библиотеки GD для создания и выделения областей на изображении:
// Создание изображения $image = imagecreatefromjpeg('example.jpg'); // Выделение области на изображении $color = imagecolorallocate($image, 255, 0, 0); // Цвет выделения (красный) imageline($image, 10, 10, 100, 100, $color); // Рисуем линию для выделения // Вывод изображения header('Content-Type: image/jpeg'); imagejpeg($image); imagedestroy($image);
Надеюсь, что эти советы помогут вам создать и выделить области на изображении. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!