Прежде всего мы подключаем библиотеку jQuery и пишем функцию, которая будет вызвана сразу после загрузки страницы (строки 3-25). В этой функции мы объявляем обработчик события hover для всех элементов страницы с классом annotaionBlock, т. е. для всех наших аннотаций. В качестве параметров этому обработчику передается 2 функции. Первая будет вызвана при появлении мышки над блоком, вторая – при выходе из него. Вторую функцию (строки 22-23) мы оставляем пустой, т. к. вставлять и прятать картинки будем в первой. Алгоритм работы. 1) При появлении курсора над аннотацией, сохраняем указатель на неё и её id (строки 6-7). 2) Проверяем загружен ли рисунок для данной аннотации (строки 8-9) и если нет, выполняем AJAX запрос к серверному (PHP) скрипту, в параметрах которого передаем id блока (строки 10-15). 3) После получения ответа сервера создаем скрытый тег img и вставляем его в конец блока с аннотацией (строки 11, 12). После этого применяем эффект slideUp ко всем картинкам в блоках с аннотацией кроме текущей (строка 13). И с помощью эффекта slideDown показываем картинку для данной аннотации (строка 14). 4) Если картинка была вставлена раньше, то AJAX запрос мы не отправляем, а просто показываем её и прячем остальные (с помощью эффектов slideUp и slideDown, строки 18-19). Обратите внимание. Если применять эффекты slideDown и slideUp непосредственно к тегу img картинка будет плавно изменять как вертикальный, так и горизонтальный размеры. Т. е. она будет «выезжать» из левого верхнего угла. Чтобы изменялась только высота картинки нужно поместить её внутрь тега div и примерять эффекты к нему. Серверная часть PHP скрипт, который обрабатывает запросы на получение картинок (getimage. php) должен прочитать id запрашиваемой картинки и вернуть соответствующую ссылку. Эти ссылки можно хранить в БД или текстовом файле, выбирать случайным образом или однозначно связать с аннотациями. Всё это зависит от конкретной ситуации. Мы ограничимся простейшим вариантом с использованием оператора switch.