HTML+CSS+JavaScript

Добрый вечер. Подскажите, пожалуйста, я новичёк в этом деле, до конца ещё не разобралась что и как,
поэтому прошу помочь у знающих людей.
Есть карта изображения:

<img src="1.jpg" width="640" height="30" usemap="#Navigation" border=0>
<p><map name="Navigation">
<area shape="poly" coords="113,24,211,24,233,0,137,0">
<area shape="poly" coords="210,24,233,0,329,0,307,24">
<area shape="poly" coords="304,24,385,24,407,0,329,0">
<area shape="poly" coords="384,24,449,24,473,0,406,0">
<area shape="poly" coords="449,24,501,24,525,0,473,0">
<area shape="poly" coords="501,24,560,24,583,0,525,0">
<area shape="poly" coords="560,24,615,24,639,0,585,0">
</map>

нужно, чтобы при попадании курсором в 1-ую область (вероятно событием OnClick), при нажатии, на этой же странице (без обновления),
эта прямоугольная область выделилась(залилась) в какой-нибудь цвет, любой. Помогите, очень прошу, валюсь с курсовой!!!

Только скриптом и стилями эту задачу не решить.
Способов несколько, но все они связаны с дополнительными графическими объектами.

Например, из одной исходной картинки в графическом редакторе типа Фотошопа вам надо будет сделать столько картинок - сколько у вас имеется тегов <AREA> (такого же размера, что и исходная, но на прозрачной основе и на каждой из картинок прорисована только соответствующая область) + одна полностью прозрачная (и тоже такого же размера, как и исходная). Т.е. для выложенного вами кода всего восемь штук.

Делаете контейнер <DIV>, по размерам равный габаритам исходной картинки.
Заливаете этот контейнер каким-либо фоном. Засовываете в этот контейнер все свои 7 картинок с областями с абсолютным позиционированием одну на другую. А сверху кладете последнюю - абсолютно прозрачную. Именно на последнюю картинку навешиваете атрибут usemap.
В итоге все это выглядит как одна нормальная картинка.

На каждый тег <AREA> вешаете обработчик onclick, по которому картинка, соответствующая этому <AREA>, становится невидимой. При клике сквозь ставшую невидимой картинку просвечивает изначальный фон контейнера <DIV>, что и выглядит как "заливка области цветом".

Я поняла о чём вы говорите, спасибо огромное. В голове у меня крутился такой вариант, просто это слишком громоздко получается. У меня тегов <area> около ста (карта местности), и получается как-то не очень, но если другого способа совсем нет, то прийдётся этим воспользоваться.
Я знаю есть библиотека , mapper, там что-то подобное реализовано, только на себя переделать не получилось.
Хорошо, спасибо большое за совет. Если кто-то знает ещё пути решения данной задачи - отписывайтесь, буду очень признательна!!!

По-любому без дополнительных графических объектов не обойтись.

Я вот вспомнил, что ранее рекомендовал здесь же немного иной способ (я тогда писал под никнеймом PAT) - http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=54476
Спрашивающий тот мой совет в итоге реализовал - см. карту Украины на странице http://1ua.com.ua/searc.php?obl=22

Для каждого area рисуете в фотожопе закрашенную область, собираете это всё в спрайт (один файл на все картинки) и при помощи javascript при клике или наведении на нужную область меняете background-position

Жалко, что проще способа нет. Но всё же, всем огромное спасибо.

http://cssadvice.blogspot.com/2008/09/javascriptcss.html
http://davidlynch.org/js/maphilight/docs/demo_usa.html