Смена картинок в зависимости от положения курсора мыши

[antonio_vrn]

Здравствуйте, уважаемые профи и читатели форума!
Я со всей серьезностью понимаю, что задача не сложная. Но, к сожалению, пока нет времени на изучение азов JavaScript.
Возникла необходимость иметь скрипт, который сможет менять картинки друг на друга в зависимости от положения курсора мыши на странице.
Допустим, можно задать границы координат страницы, в пределах которых на странице будет одна из картинок, когда курсор мыши будет находиться там. За пределами этих границ будут другие границы координат страницы, в пределах которых другая картинка заменит предыдущую. И так далее.
Всего должно быть 8 зон: 4 ограничены размерами квадратной картинки и еще 4 оставшиеся, не вошедшие туда (как на картинке). На все 8 зон 8 разных картинок. Ну еще можно добавить 9ую стандартную картинку, когда курсор мыши находится вне страницы.
Спасибо!

[jazzz13]

Здравствуйте.
Нужна верстка которая и будет содержать в себе эти 8 блоков как у Вас не рисунке.
При наведении на каждый блок вызывается событие, которое выставляет нужную картинку в нужное место.

Если еще актуально могу черновик набросать (jQ да?нет?).

[antonio_vrn]

Как Вам удобно, лишь бы было понятно, чтобы разобраться и использовать его в дальнейшем. Сам не далек от программирования (PHP, Delphi).
Спасибо.

[jazzz13]

Надеюсь с версткой все понятно.
У каждого блока должен быть атрибут (например name) которые будет содержать название картинки. И у всех одинаковый класс: "blockclass".

Так как Вы не знакомы с js до подключим jQuery и будет проще.

var blocks = $('.blockclass'); // находим все блоки нашего класса
var img = $('#img'); // находим картинку по ИД = #img
blocks.mouseover(function(){ //вешаем функцию на наведение мыши
   new_src = $(this).attr('name');  // получаем новый путь из name текущего блока
   img.attr('src',new_src); // заменяем старый на новый
});