Сегодня меня застала врасплох потребность сделать так, чтобы при наведении курсора картинка менялась на другу. Так иногда делают в меню сайтов, наводишь, например, курсор на ссылку "Форум" и фон за ней становится другого цвета, наводишь на "Контакты" он тоже меняется.
По-началу всё было хорошо, я нашёл в интернете скрип и протестировал его с одной картинкой. Он работает! Я слегка подредактировал код, чтобы он мог работать со всеми пунктами меню и тут появилась проблема - при наведении курсора на один пункт меню, меняются картинки сразу у всех пунктов, то есть и у "Форума" и у "Контактов".
С javascript я совсем не знаком. Помогите, пожалуйста, исправить эту ошибку.
Код:
<HEAD>
<script LANGUAGE="JavaScript">
function anim()
{
document.news.src="images/news2.jpg"
document.overviews.src="images/overviews2.jpg"
document.articles.src="images/articles2.jpg"
document.ratings.src="images/ratings2.jpg"
}
function stat()
{
document.news.src="images/news.jpg"
document.overviews.src="images/overviews.jpg"
document.articles.src="images/articles.jpg"
document.ratings.src="images/ratings.jpg"
}
</script>
</HEAD>
<BODY>
<table>
<tr>
<td><a href="news.php"><img src="images/news.jpg" width="230" height="230" hspace="5" NAME="news" BORDER=0 onMouseOver="anim()" onMouseOut="stat()"></a></td>
<td><a href="overviews.php"><img src="images/overviews.jpg" width="230" height="230" hspace="5" NAME="overviews" BORDER=0 onMouseOver="anim()" onMouseOut="stat()"></a></td>
<td><a href="articles.php"><img src="images/articles.jpg" width="230" height="230" hspace="5" NAME="articles" BORDER=0 onMouseOver="anim()" onMouseOut="stat()"></a></td>
<td><a href="ratings.php"><img src="images/ratings.jpg" width="230" height="230" hspace="5" NAME="ratings" BORDER=0 onMouseOver="anim()" onMouseOut="stat()"></a></td>
</tr>
</table>
</BODY>
С уважением.