9 фев 2020 в 19:55

Интерактивная флеш-схема на HTML

Ожидает приглашения

ЗАДАЧА: Создать интерактивную схему, при наведении курсора на элементы которой они будут подсвечиваться, а при щелчке на них мышкой — открывать соответствующий раздел.

ИНСТРУМЕНТЫ: Язык HTML

РЕШЕНИЕ:

HTML позволяет подсветить объект, на который наводится курсор, с помощью следующего кода:

<IMG src="image1.JPG" onmouseover="this.src='image2.JPG'"; onmouseout="this.src='image1'"; >

где:

image1.JPG — исходное изображение
image2.JPG — изображение, на которое заменяется исходная картинка при наведении курсора

Пример:

Теперь создаём общую схему, где каждый элемент будет подсвечиваться при наведении курсора. Важно помнить, что HTML не позволяет в этом случае размещать объекты в любом месте схемы, нужно соблюдать горизонтальный принцип упорядочивания и одинаковую высоту в каждой строке, содержащей элементы будущей интерактивной схемы. В качестве примера нарисуем схему московского транспорта:

Данная картинка состоит из множества изображений, которые складываются в общую схему:

Каждый элемент, который будет подсвечиваться при наведении, имеет свою подсвеченную копию:

Теперь для каждого элемента создаем гиперссылку:

<A href="anillo.html" title="Tren" onclick="window.open(anillo.html)"><IMG src="2.JPG" onmouseover="this.src='2.2.JPG'"; onmouseout="this.src='2.JPG'"; ></A>

где:

anillo.html — адрес страницы, на которую ведет ссылка при щелчке на элементе схемы
Tren — всплывающая подсказка при наведении курсора на элемент
2.JPG — исходное изображение
2.2.JPG — подсвеченное изображение

Общий код интерактивной схемы выглядит следующим образом:

<NOBR><A href="anillo.html" title="Tren" onclick="window.open(anillo.html)"><IMG src="2.JPG" onmouseover="this.src='2.2.JPG'"; onmouseout="this.src='2.JPG'"; ></A><IMG src="3.JPG"></NOBR>
<IMG src="4.JPG">
<IMG src="5.JPG"><A href="#" title="Tren"><IMG src="6.JPG" onmouseover="this.src='6.2.JPG'"; onmouseout="this.src='6.JPG'"; ></A><IMG src="7.JPG"><A href="#" title="Torniquete"><IMG src="8.JPG" onmouseover="this.src='8.2.JPG'"; onmouseout="this.src='8.JPG'"; ></A><A href="#" title="Billetes"><IMG src="9.JPG" onmouseover="this.src='9.2.JPG'"; onmouseout="this.src='9.JPG'"; ></A><A href="#" title="Billetes"><IMG src="10.JPG" onmouseover="this.src='10.2.JPG'"; onmouseout="this.src='10.JPG'"; ></A><IMG src="11.JPG"><A href="#" title="Torniquete"><IMG src="12.JPG" onmouseover="this.src='12.2.JPG'"; onmouseout="this.src='12.JPG'"; ></A><A href="#" title="Billetes"><IMG src="13.JPG" onmouseover="this.src='13.2.JPG'"; onmouseout="this.src='13.JPG'"; ></A><A href="#" title="Vestibulo"><IMG src="14.JPG" onmouseover="this.src='14.2.JPG'"; onmouseout="this.src='14.JPG'"; ></A><A href="#" title="Billetes"><IMG src="15.JPG" onmouseover="this.src='15.2.JPG'"; onmouseout="this.src='15.JPG'"; ></A><A href="#" title="Torniquete"><IMG src="16.JPG" onmouseover="this.src='16.2.JPG'"; onmouseout="this.src='16.JPG'"; ></A><IMG src="17.JPG"><A href="#" title="Navegacion"><IMG src="18.JPG" onmouseover="this.src='18.2.JPG'"; onmouseout="this.src='18.JPG'"; ></A><IMG src="19.JPG">
<IMG src="20.JPG">
<IMG src="21.JPG"><A href="#" title="Policia"><IMG src="22.JPG" onmouseover="this.src='22.2.JPG'"; onmouseout="this.src='22.JPG'"; ></A><A href="#" title="Navegacion"><IMG src="23.JPG" onmouseover="this.src='23.2.JPG'"; onmouseout="this.src='23.JPG'"; ></A><IMG src="24.JPG"><A href="#" title="Navegacion"><IMG src="25.JPG" onmouseover="this.src='25.2.JPG'"; onmouseout="this.src='25.JPG'"; ></A><IMG src="26.JPG"><A href="#" title="Tiempo"><IMG src="27.JPG" onmouseover="this.src='27.2.JPG'"; onmouseout="this.src='27.JPG'"; ></A><IMG src="28.JPG">
<IMG src="29.JPG"><A href="#" title="Tren"><IMG src="30.JPG" onmouseover="this.src='30.2.JPG'"; onmouseout="this.src='30.JPG'"; ></A><IMG src="31.JPG"><A href="#" title="Informacion"><IMG src="32.JPG" onmouseover="this.src='32.2.JPG'"; onmouseout="this.src='32.JPG'"; ></A><IMG src="33.JPG">

Таким образом, мы решили задачу по созданию интерактивной флеш-схемы исключительно при помощи HTML. Подобным образом можно реализовать более сложные схемы, к примеру такие:

В последнем случае на интерактивной схеме Москвы, где все элементы подогнаны под горизонтальное выравнивание, подсвечиваться будут только достопримечательности.

Хабы:

HTML