JQuery наведите указатель мыши на карту местоположение измените размер места

Question

Я создаю карту на веб-сайте для местной тропы искусства. Наши графические дизайнеры придумали отличную, очень своеобразную, стилизованную карту (думаю, Лондонская подземная карта), где каждый маркер местоположения является нашим логотипом.

Каждое местоположение логотипа должно изменяться при зависании, а затем менять цвет при нажатии - я могу придумать способ изменения цвета с помощью тега области, но я действительно хочу, чтобы изображение логотипа местоположения становилось больше, когда оно зависало ,

Любые идеи?

Answer 1

Подумайте об использовании svg и добавьте классы в свои объекты, не нужно использовать тег области, и ваша графика будет всегда острой.

Первое масштабирование: здесь вы можете использовать чистый раствор CSS3 как @odedya упоминалось комментарию:

.element:hover { 
    transform: scale(20); 
} 

Во-вторых: изменение цвета вашего маркера SVG по щелчку:

$('.marker').on("click", function() { 
    $('#path').css({ fill: "#000000" }); 
}); 

также думать о диапазоне браузеров, которые вам нужно поддерживать, если они ниже, чем проверка на совместимость 9. http://caniuse.com/#feat=svg. Также обратите внимание на преобразование - возможно, вам нужны некоторые префиксы. http://caniuse.com/#search=transform. Даже для ie9 и safari вам нужны префиксы ms- и -webkit.

Также еще одна вещь, если вы хотите сохранить определенную последовательность событий, вы можете лучше управлять ею с помощью js/jquery, поэтому используйте событие mouseover для получения желаемого эффекта, а затем позвольте щелкнуть. Я мало знаю об анимации масштаба масштабирования, но вы можете использовать plugin. Попробуйте что-нибудь вроде:

$('.marker').mouseenter(function() { 
    $(this).animate({ transform: 1.2 }); 
}).click(function() { 
    $('#path').css({ fill: '#333333' }); 
    });