Интерактивная карта CSS - Перекрывающиеся графства меняют цвет при наведении - PullRequest
2 голосов
/ 23 сентября 2010

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

Обычно это не будет проблемой, но из-за странных форм округов, эти области, которые могут зависать, будут сильно перекрываться, что означает, что любой округ покрываетсяиз-за навеса из другого округа не будет.

Я знаю Я видел пример того, как подобное делалось без проблем с перекрытием, но я не могу найти его ввсе.У кого-нибудь есть идеи относительно того, как я мог бы сделать это, не перекрывая друг друга, чтобы стать большой проблемой для конечного пользователя?

У меня нет кода для показа, так как я еще не начал работу над ним, япросто знаю, что это будет головная боль.Карта, которую я буду использовать, скорее всего, будет такой же: http://proofs10.issl.co.uk/images/contact-map.jpg, и, как вы можете видеть, накладываю ли я элементы на каждый округ, который создает проблему.

Ответы [ 2 ]

2 голосов
/ 23 сентября 2010

С флэш не может быть и речи, ваш единственный вариант - это javascript. Я использовал плагин jquery:

http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/

Документация довольно хорошая. Как только вы освоитесь, это будет бризом. Удачи.

1 голос
/ 29 сентября 2010

Возможно, это немного излишне, но OpenLayers - это кросс-браузерная библиотека JavaScript, которая позволяет размещать масштабируемые, перетаскиваемые интерактивные карты на вашей веб-странице.Элементы могут быть сделаны, чтобы выделить при наведении курсора и сделать что-то по щелчку.Вы можете ограничить масштабирование и панорамирование, если вы просто хотите иметь фиксированную карту.

Вы должны получить карту своего графства в подходящем векторном формате (GML работает хорошо).

...