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

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

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

РЕШЕНИЕ:

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

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

где:

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

Пример:

image

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

image

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

image

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

image

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

<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. Подобным образом можно реализовать более сложные схемы, к примеру такие:

image

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

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.