Графическое меню с изменяемой палитрой

Создадим документ, реализующий вертикальное графическое меню, действующее следующим образом: при наведении курсора мыши над пунктом меню меняется цветовая палитра, соответствующая выделенному пункту меню.

Каждому пункту меню соответствует два изображения:

• первое изображение, когда пункт меню не выбран;
• второе - при выбранном пункте меню, цветовая палитра рисунка изменена.

Графические изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами pch1.gif, pch2.gif, pch3.gif, pch4.gif, pch5.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpch1.gif, wpch2.gif, wpch3.gif, wpch4.gif, wpch5gif.

При перемещении курсора над связью возникает событие onmouseover. В этом случае при решении задачи требуется изменить графическое изображение, соответствующее выбранному пункту меню, что осуществляется в результате выполнения оператора присваивания

onmouseover="document.pm1.src='wpch1.gif'"

Если курсор мыши перемещается из области связи, то возникает событие onmouseout, в результате обработки которого пункт меню должен принять первоначальный вид. Это достигается оператором присваивания

onmouseout="document.pm1.src='pch1.gif'"

HTML-код документа, реализующего графическое вертикальное меню, может иметь следующий вид, представленный в листинге 6.4.

Пример выполнения

Событие onmouseover возникает и при перемещении курсора мыши над изображением. Событие onmouseout возникает при перемещении курсора из области изображения. Поэтому обработку события можно помещать не в тег <a>, как было сделано в предыдущем примере, а в тег <img>.