Вот обновленный jsFiddle для первой части
Вот основы:
<div id="city-map">
<a href="#" id="mac"><div class="pop-up">...</div></a>
<a href="#" id="admin"><div class="pop-up">...</div></a>
...
</div>
Мы используем карту изображения с тегами привязки в качестве «горячих точек».Мы используем CSS, чтобы расположить эти «горячие точки» в нужном месте, и мы делаем базовый «трюк» спрайта фонового изображения, так же, как вы это делали в исходном коде.
Тем не менее, я обновил ваше изображение спрайта, чтобы иметь два "парящих" изображения.При создании карты при наведении изображения с не квадратными точками изображения (например, здания, накладывающиеся друг на друга), в одном состоянии при наведении курсора возникает проблема со значком «соседа», который отображается в срезе горячей точки.Это связано с тем, что блоки HTML имеют квадратную форму и не способны рисовать странные фигуры.Мы решаем эту проблему с помощью дополнительных состояний изображений, чтобы соседи по-прежнему выглядели невыделенными.
Всплывающее окно
<div class="pop-up">
<h1 class="title">Mac</h1>
<div class="content">Some Content</div>
</div>
Все всплывающие окнакоробки имеют этот формат HTML.I позиция: абсолютная;их в сторону со стандартным левым: -999em;трюк.Я создал CSS, чтобы дать им стандартное всплывающее окно с небольшим пространством между блоком горячих точек и всплывающим окном.Это помогает гарантировать, что ваша мышь будет «зависать» из горячей точки при достижении новой горячей точки.В противном случае вы будете наводить курсор на всплывающее окно, и оно не исчезнет, пока вы не выключите оба.
<div id="city-map-legend">
<div id="glamour-photo">
<img src="..." id="mac-img" />
<img src="..." id="admin-img"/>
...
</div>
<div id="cml-list">
<h2>Around Campus</h2>
<ul>
<li><a id="mac-list" href="#">Mac</a></li>
...
</ul>
</div>
</div>
Для «легенды карты» у меня есть группа «гламурных изображений»и список ссылок.Довольно стандартные вещи.Ключ в том, как они все связаны друг с другом своими удостоверениями личности.JavaScript будет использовать это для обмена изображениями и состояниями CSS, так как мы связываем вместе три элемента (карту, гламурное изображение и список ссылок).
Идентификаторы на карте - это прямые идентификаторы, такие как «mac».Идентификаторы на гламурных изображениях: "[id] -img" (т.е. "mac-img").И идентификаторы в списке: «[id] -list» (т. Е. «Mac-list»).
<script type="text/javascript" src="*"></script>
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Я рекомендую использовать jQuery для облегчения выполнения JavaScript и загрузки его из Google API для простых преимуществ Content Delivery Network.
Все, что действительно осталось, - это событие JavaScript.
$(document).ready(function() {
// highlight map when legend link is hovered
$('#cml-list a').hover(
// hover over
function(){
// get id code
var id = $(this).attr('id');
// tokenize string to get main id code
var tokens = id.split('-');
id = '#' + tokens[0];
// add active class to map id
$(id).addClass('active');
},
// hover out
function(){
// clear all .active classes from map
$('#city-map a').removeClass('active');
}
);
});
Что происходит выше, мы говорим, что JavaScript должен запускаться всякий раз, когда кто-то наводит списокссылка на сайт.При наведении указателя мыши происходит два события:
Когда кто-либо наводит указатель мыши на ссылку, мы получаем из нее значение базового идентификатора, и все, что мы делаем, - это применяем CSS-класс «активный» к горячей точке карты.Класс ".
". Active "в основном" включает "элемент карты, как если бы он был наведен (если вы заметили в CSS, все стили селектора: hover также совместно используются с '.active'class).
Когда мы наведемся, мы просто скажем jQuery удалить все «активные» классы.Все, что осталось сделать, это поменять местами и написать код, который делает то же самое для «гламурных» изображений.Просто включите их (дисплей: блок) или выключите (дисплей: нет).Единственный улов в том, что, вероятно, должно быть изображение по умолчанию, которое мы всегда включаем, если ничего не выбрано, если только мы не хотим, чтобы ранее активированное изображение гламура оставалось активным, это тоже работает.
У меня нетдобрался до этого куска кода еще.Я посмотрю, смогу ли я обновить его позже, и, возможно, немного поиграю с вами.
обновление
- Я разработал его в основном в Chromeи немного Firefox.Я только что проверил это в IE7 / 8/9, и он, кажется, работает нормально.
- Я обновил jsFiddle, чтобы включить гламурный обмен изображениями.У меня также была небольшая ошибка CSS, когда я поместил поплавок в неправильное место.Итак, отработайте последнюю версию.
- NOTE Я не делал CSS для всех локаций.Я сделал несколько примеров, но остальное оставил для вас.=)
Кстати, я обновил изображение вашей карты и загрузил его на imgur.com => http://i.imgur.com/n7spM.png