Уменьшение стрелки
 

Доброго времени суток! Я новичок jQuery, поэтому хочу спросить у знающих людей, скорее всего, это плёвое дело, но всё-таки... Необходимо сделать следующее: чтобы при наведении курсора на круглую картинку, нижняя стрелка оставалась на месте, а верхняя - уменьшалась до ссылки, но при убирании курсора всё должно стать как прежде.
Как лучше это реализовать на практике?

Вот как надо сделать:


Заранее благодарен.

Допустим стрелка имеет id = "arrow", а картинка имеет id = "image", тогда код имеет вид

var SMALL_ARROW_HEIGHT = /* размер маленькой стрелки */;
var NORMAL_ARROW_HEIGHT = /* размер обычной стрелки */;
$("#image").hover(function(){ 
  $("#arrow").height( SMALL_ARROW_HEIGHT );
}, function(){
  $("#arrow").height( NORMAL_ARROW_HEIGHT );
});

Это самое простое, задача усложняется если вам нужно имеено на круглую картинку( круглая она визуально на самом деле прямоугольная), и это вариант без всяких анимаций

Спасибо. Код вроде понятен, но почему-то не работает ни через <div>, ни через <img>. Может я что-то делаю не так? Можете привести пример HTML?

Ещё раз спасибо!

P.S.: И, если Вас не затруднит, можете ещё привести пример кода анимации стрелки?