В настоящее время у меня есть меню с использованием парящих графических карт, которое работает в Firefox, IE, Opera и Chrome.Однако эффект наведения не работает так, как ожидалось в Safari.Идея состоит в том, чтобы использовать карту изображений и JavaScript, чтобы изменить изображение меню, когда некоторые элементы отображаются.В этом случае изображение меню изменится на изображение, где текст элемента наведения - черный.
Вот простой небольшой пример того, как настроено меню:
HTML:
<ul id="menu">
<li class = "topLevel"><a href = "../howWeDoIt/howWeDoIt.php">How We Do It</a>
<ul>
<li><img id = "how" src="../img/menu/how/how.png" usemap="#menuMapHow" alt="How We Do It"/></li>
</ul>
<map name = "menuMapHow" id="menuMapHow">
<area shape="poly" coords="37,2,104,2,136,60,103,118,37,119,3,60" alt="Publications Link" onmouseover="document.getElementById('how').src='../img/menu/how/how1.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href=../howWeDoIt/publications/publications.php />
<area shape="poly" coords="140,63,206,63,241,122,207,180,140,180,107,121" alt="Websites Link" onmouseover="document.getElementById('how').src='../img/menu/how/how2.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href="../howWeDoIt/websites/websites.php" />
<area shape="poly" coords="36,124,102,124,136,182,103,240,36,240,2,182" alt="Professional Development Link" onmouseover="document.getElementById('how').src='../img/menu/how/how3.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href="../howWeDoIt/professionalDevelopment/professionalDevelopment.php" />
</map>
</li>
</ul>
CSS:
#menu > li > ul > li{
display: none;
}
#menu > li:hover > ul > li{
display: block;
z-index: 1;
}
В настоящее время он также размещен на [удалено]. Размещенная версия будет несколько отличаться и может по-прежнему иметь проблемы с Opera, поскольку я не загрузил измененияпока что.
Проблема с Safari заключается в том, что когда курсор входит в любую из горячих точек карты-изображения, JavaScript запускается, но элемент наведения теряет фокус и исчезает.Я не уверен, является ли это причудой с Safari или фактической ошибкой, но на удивление это не вызывает никаких проблем с Chrome или любым другим популярным браузером, который я пробовал.
Если естьБолее простой альтернативный метод, чтобы получить тот же эффект, то есть спрайты или что-то еще, я был бы признателен за указание о том, как реализовать это вместо.вместо этого относится к области веб-мастеров.