Нужно всего лишь немного JS кода и библиотеки jQuery, чтобы создать такую полнофункциональную штуку, как плагин MobilyMap.
ПримерСкачать
MobilyMap плагин jQuery конвертирует обычное изображение в функциональную карту, как, например, у Google, и весит всего 6KB.
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('.map').mobilymap({ position: 'center', // map position after loading - 'X Y', 'center', 'top left', 'top right', 'bottom left', 'bottom right' popupClass: 'bubble', markerClass: 'point', popup: true, // show popup on marker click - true/false cookies: true, // remember last map position - true/false caption: true, // show caption - true/false setCenter: true, // sets the map view to the center on marker click outsideButtons: null, // selector, only anchors eg. '.map_buttons a' onMarkerClick: function(){}, // call the function on marker click (popup must be disabled) onPopupClose: function(){}, // call the function after popup closing onMapLoad: function(){} // call the function after loading map }); |
HTML
1 2 3 4 5 6 7 |
<div class="map"> <img src="path_to_image" alt="caption" width="image_width" height="image_height" /> <div class="point" id="p-900-130"> <!-- p-x-y (x is distance from left, y is distance from top) --> <!-- popup content --> </div> <!-- markers --> </div> |
HTML код маркера:
1 2 |
<a href="#" rel="p-900-130"> .. </a> <!-- 'rel' attribute have to be the same as marker 'id' attribute! --> |
Если у вас предложения по улучшению данного плагина, оставляйте ниже ваши комментарии.