Клуб API Карт

Как создать эффект смены картинки у метки?

Пост в архиве.

Добрый день, уважаемые участники!

Пробую сделать смену картинки у пользовательской метки (метки, для которой установлена своя картинка) при наведении на неё курсора.

Пробовал так:

 

var s1= new YMaps.Style(
s1.iconStyle = new YMaps.IconStyle(
s1.iconStyle.offset = new YMaps.Point(-45, -45);
s1.iconStyle.href = 'icon.png';
s1.iconStyle.size = new YMaps.Point(91, 45);

var s2 = new YMaps.Style(
s2.iconStyle = new YMaps.IconStyle(
s2.iconStyle.offset = YMaps.Point(-45, -45);
s2.iconStyle.href = 'icon_hover.png';
s2.iconStyle.size = new YMaps.Point(91, 45);

var placemark = new YMaps.Placemark(point, {style: s1}
map.addOverlay(placemark);

YMaps.Events.observe(placemark, placemark.Events.MouseEnter, function (obj) {
obj.setStyle(s2);
}

YMaps.Events.observe(placemark, placemark.Events.MouseLeave, function (obj) {
obj.setStyle(s1);
}

 

Но есть проблема: сдёргивание метки в сторону при наведении курсора

2 комментария

Причём интересно, что сначала происходит смещение метки, а потом уже подставляется другая картинка.

чтобы не картинка менялась сразу вам потребуется ее заранее загрузить.

Те где-то в коде - var cachedImage = new Image();cachedImages.src='моя картинка';

"сдергивание" зависит только от offset