ЗАДАЧА: Создать интерактивную схему, при наведении курсора на элементы которой они будут подсвечиваться, а при щелчке на них мышкой — открывать соответствующий раздел.
ИНСТРУМЕНТЫ: Язык HTML
РЕШЕНИЕ:
HTML позволяет подсветить объект, на который наводится курсор, с помощью следующего кода:
где:
Пример:
![image](https://habrastorage.org/r/w780q1/webt/2s/3f/or/2s3forjrx72v7mqhjdojzh8mhws.jpeg)
Теперь создаём общую схему, где каждый элемент будет подсвечиваться при наведении курсора. Важно помнить, что HTML не позволяет в этом случае размещать объекты в любом месте схемы, нужно соблюдать горизонтальный принцип упорядочивания и одинаковую высоту в каждой строке, содержащей элементы будущей интерактивной схемы. В качестве примера нарисуем схему московского транспорта:
![image](https://habrastorage.org/r/w780q1/webt/dh/db/vy/dhdbvyzbzeaagwsa9hyofnzkjma.jpeg)
Данная картинка состоит из множества изображений, которые складываются в общую схему:
![image](https://habrastorage.org/r/w780q1/webt/7e/ws/rq/7ewsrqjqjbzvoegx0rc_ep6pm5g.jpeg)
Каждый элемент, который будет подсвечиваться при наведении, имеет свою подсвеченную копию:
![image](https://habrastorage.org/r/w780q1/webt/ic/02/5u/ic025ualkyq7r1pljt2t9few1-4.jpeg)
Теперь для каждого элемента создаем гиперссылку:
где:
Общий код интерактивной схемы выглядит следующим образом:
Таким образом, мы решили задачу по созданию интерактивной флеш-схемы исключительно при помощи HTML. Подобным образом можно реализовать более сложные схемы, к примеру такие:
![image](https://habrastorage.org/r/w780q1/webt/my/oj/zl/myojzlpovb1ke57lb7ookdgthga.jpeg)
В последнем случае на интерактивной схеме Москвы, где все элементы подогнаны под горизонтальное выравнивание, подсвечиваться будут только достопримечательности.
ИНСТРУМЕНТЫ: Язык HTML
РЕШЕНИЕ:
HTML позволяет подсветить объект, на который наводится курсор, с помощью следующего кода:
<IMG src="image1.JPG" onmouseover="this.src='image2.JPG'"; onmouseout="this.src='image1'"; >
где:
- image1.JPG — исходное изображение
- image2.JPG — изображение, на которое заменяется исходная картинка при наведении курсора
Пример:
![image](https://habrastorage.org/webt/2s/3f/or/2s3forjrx72v7mqhjdojzh8mhws.jpeg)
Теперь создаём общую схему, где каждый элемент будет подсвечиваться при наведении курсора. Важно помнить, что HTML не позволяет в этом случае размещать объекты в любом месте схемы, нужно соблюдать горизонтальный принцип упорядочивания и одинаковую высоту в каждой строке, содержащей элементы будущей интерактивной схемы. В качестве примера нарисуем схему московского транспорта:
![image](https://habrastorage.org/webt/dh/db/vy/dhdbvyzbzeaagwsa9hyofnzkjma.jpeg)
Данная картинка состоит из множества изображений, которые складываются в общую схему:
![image](https://habrastorage.org/webt/7e/ws/rq/7ewsrqjqjbzvoegx0rc_ep6pm5g.jpeg)
Каждый элемент, который будет подсвечиваться при наведении, имеет свою подсвеченную копию:
![image](https://habrastorage.org/webt/ic/02/5u/ic025ualkyq7r1pljt2t9few1-4.jpeg)
Теперь для каждого элемента создаем гиперссылку:
<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](https://habrastorage.org/webt/my/oj/zl/myojzlpovb1ke57lb7ookdgthga.jpeg)
В последнем случае на интерактивной схеме Москвы, где все элементы подогнаны под горизонтальное выравнивание, подсвечиваться будут только достопримечательности.