Представление информации в виде изображения, а также возможность навигации по его частям дает эффективное понимание какой либо темы, проекта и т.п. Такую возможность нам дают интерактивные карты. В данной теме представлена интерактивная схема (карта) устройства. Что в свою очередь представляет собой визуальную информацию, в отличие от обычной карты. Здесь кроме информации, которую мы получаем при чтении карты, также можем получить дополнительную информацию – наведя курсором на необходимую нам область.Для создания такой карты (схемы) мы используем HTML + javascript и библиотеки jQuery. А также для визуального представления устройства мы используем программу Fritzing. Для реализации данной идеи мы используем тег <map> </map>, который собственно говоря за карту изображения и отвечает. Ниже основной код отвечающий за создание карты изображения.
<html>
<head>
<title>Карта контролера</title>
</head>
<body style=" background-color:Silver; text-align:center;">
<img src="kontroler.jpg" alt ="Microcontroler vvoda-vyvoda" title ="Microcontroler vvoda-vyvoda" width="1000px" usemap="#Controller" />
<map>
<area shape="rect" coords="10, 120, 230, 380" title="4 SEGM LED" href=http://www.ap-impulse.ru/podklyuchaem-semisegmentnyj-indikator-i-pishem-programmu-shag-5/ target="_blank" />
</map
<p> Контроллер сбора данных </p>
</body>
</html>
Для расширения функционала добавим javascript – подсветка областей, а именно функцию maphilight.js. Заодно научимся подключать библиотеку jQuery и проверять ее работоспособность. Также добавим в код обработку событий по нажатию мышки на ту или иную область. Из всего этого коктейля технологий и языков получим интерактивную карту изображения устройства на микроконтроллере. Также с помощью атрибута data (универсальный атрибут в HTML5), добавим изменения в стиль выделяемой области:
Подробнее читайте по ссылке.
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
0
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20250620053442