Создать эффект наведения | Mapbox GL JS Создание эффекта наведения | Картбокс GL JS | Mapbox
All docschevron-rightMapbox GL JSchevron-rightarrow-leftExampleschevron-rightСоздание эффекта наведения
Используйте события и состояния объектов для создания эффекта наведения для каждого объекта.
Создать эффект наведения
Карты изображений CSS — Flickr-подобная техника?0001 Карты изображений CSS — метод, похожий на Flickr? Перейти к примеру
Опубликована альтернатива картам CSS, состоящим только из изображений. Карты изображений CSS, Redux
Ниже приведен пример карты изображения, полностью созданной с использованием CSS и XHTML. Хотя я добавил поддержку
для Javascript (названия элементов просто отображаются под изображением), я отключил его в этом примере
— Я столкнулся с небольшой проблемой, когда JS включен, а CSS отключен (подробнее ниже).
Первоначальная идея пришла из блога
я прочитал в блоге Джины Траппини, Scribbling.net. Ее пример был сделан хорошо, но я хотел
чтобы попытаться сделать то же самое (или подобное), используя только CSS.
Затем я нашел ссылку на сайт The Daily Kryogenix (через сообщение Джины), которая привела к карте изображений, в которой использовался более легкий DHTML, и использовался тег </code> для отображения заметок о точке доступа.
Тем не менее, несколько зависит от Javascript/DHTML.</p><p> В конце концов я решил воспользоваться услугами Дуга Боумена.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/wQMOG4NxuqY/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/wQMOG4NxuqY/hqdefault.jpg' /></noscript> Техника раздвижных дверей в сочетании с
список определений ( <code><dl></dl> </code> ).</p><p> Техника раздвижных дверей позволяет вам содержать все ваши эффекты ролловера изображения в одном файле изображения,
и используйте свойство CSS <code> background-position </code> для «сдвига» изображения в любом
направление. Добавив эффект <code> :hover </code> в свой CSS (в данном случае в <code><div class="advv"> <ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="7683656859"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div> <a> </code>, содержащемся внутри тега <code><dd> </code>), вы можете переместить изображение в нужное положение.</p><p> Я создал карту изображений в Photoshop. Как вы можете видеть на этом изображении, карта
состоит из 3 копий одного и того же изображения, каждая из которых имеет разные отметки. Верх ( <strong> 1 из 3 </strong> ) просто отмечает
горячие точки с номерами, а также средние и нижние изображения ( <strong> 2 и 3 из 3 </strong> ) содержат ролловер
эффекты (белая прозрачность). Вам может быть интересно, почему эффект опрокидывания разделен на две части.
отдельные изображения. Причина разделения связана с перекрытием соседних элементов (например, монитора,
блокнот и дискету на столе).<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/66/9b/44/669b44e1f72b3e40e7ea754ae6311b3b.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/66/9b/44/669b44e1f72b3e40e7ea754ae6311b3b.jpg' /></noscript><center><ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="2646898692"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> Вместо того, чтобы иметь столкновение между двумя элементами,
эффекты ролловера для соседних элементов были разделены на несколько копий одного и того же изображения.</p><p> По сути, это работает путем помещения заголовка элемента в термин определения
тег ( <code><dt></dt> </code> ) вашего списка, за которым следует описание в
тег определения-описания ( <code><dd></dd> </code> ). Затем CSS скрывает термин-определение
(что действительно используется, когда CSS отключен), а также определение-описание (отображается при наведении якоря) и
отображает описание определения (в данном случае описание точек доступа, которые вы выбрали для
ваша карта изображения), а также абсолютно позиционирует и отображает описание при наведении курсора на точку доступа.
(также определено в CSS).</p><center><ins class="adsbygoogle"
style="display:block;height:250px"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="7192702265"
data-ad-format="link"
data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><p> Код также изящно деградирует. Тег <code> <img> </code>, отображающий несопоставленную версию карты изображения, скрыт.
с помощью CSS. Для тех, у кого отключен CSS, сопоставленная версия изображения (изображение из 3 частей) не отображается, так как оно является частью <code> background </code> Свойство CSS.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/5f/a0/c4/5fa0c45484c5dc6efde9ce16c592d83c.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/5f/a0/c4/5fa0c45484c5dc6efde9ce16c592d83c.png' /></noscript> Вместо этого будет отображаться неотображенная версия вместе со списком определений без стиля. Если у вас есть
получил расширение Web Developer для Firefox,
идите вперед и отключите стили. Вы получите лучшее представление о деградации.</p><div class="advv"><ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="9708551946"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div><p> Пример кода показан ниже (полный код CSS и XHTML см. в исходном коде):</p><p></p> Реклама<h3><span class="ez-toc-section" id="CSS"> CSS: </span></h3><pre>
dd#monitorDef{верхняя часть: 65px; слева: 114 пикселей; }
dd#monitorDef a{ position: absolute; ширина: 73 пикселя; высота: 69 пикселей; текстовое оформление: нет; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; фон: прозрачный URL (office.jpg) -109px -317px без повторов; верх: -10px; слева: -5px; }
dd#monitorDef a: диапазон наведения {
дисплей: блок;
отступ текста: 0;
вертикальное выравнивание: сверху;
цвет: #000;
цвет фона: #F4F4F4;
вес шрифта: полужирный;
положение: абсолютное;
граница: 1px сплошная #BCBCBC;
низ: 100%;
маржа: 0;
отступ: 5px;
ширина: 250%;
}
</pre><center><ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="9081085738"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><h3><span class="ez-toc-section" id="HTML"> HTML: </span></h3><pre>
<дл>
<дт>1.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/xLkiv.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/xLkiv.png' /></noscript> Монитор</dt>
<dd><a href="#"><span>Вот мой 17-дюймовый монитор. Хотел бы я иметь ЖК-дисплей!</span></a></dd>
<дт>2. Телефон</dt>
<dd><a href="#"><span>Эта штука когда-нибудь перестанет звонить?</span></a></dd>
<дт>3. Корпус ПК</dt>
<dd><a href="#"><span>Это мой сумасшедший ящик с Linux! Должен любить этот Linux...</span></a></dd>
<дт>4. IBM ThinkPad</dt>
<dd><a href="#"><span>Вот мой ноутбук с Linux. Происходит какой-то сумасшедший код.</span><div class="advv">
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="7683656859"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div></a></dd>
<дт>5. Внешний дисковод для гибких дисков</dt>
<dd><a href="#"><span>Дисковод. Древний... Я знаю!</span></a></dd>
</dl>
</pre><p> Рабочий пример можно посмотреть ниже (изображение ниже взято из The Daily Kryogenix): p></p><p></p> Реклама<dl><dt> 1. Монитор</dt><dd> Вот мой 17-дюймовый монитор. Хотел бы я иметь ЖК-дисплей!</dd><dt> 2. Телефон</dt><dd> Эта штука когда-нибудь перестанет звонить?</dd><dt> 3. Корпус ПК</dt><dd> Это моя сумасшедшая коробка с Linux! Должен любить этот Linux…</dd><dt> 4.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/11/1e/f5/111ef587eb544216b3402320ba843686.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/11/1e/f5/111ef587eb544216b3402320ba843686.png' /></noscript> IBM ThinkPad</dt><dd> Вот мой ноутбук с Linux. Происходит какое-то сумасшедшее кодирование.</dd><center><ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="2646898692"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><dt> 5. Внешний дисковод для гибких дисков</dt><dd> Дисковод. Древний… Я знаю!</dd></dl><p> Хотя это может быть не самое «идеальное» решение, оно, безусловно, расширяет примеры
вышеперечисленное. Мне очень понравилась идея Джины, поэтому я попытался расширить ее. К сожалению,
с текущими ограничениями CSS (а также некоторых браузеров) я не смог полностью воспроизвести
точная функциональность примера Джины.</p><p> Вот пример, в котором используются как CSS, так и Javascript. Одна проблема, с которой я столкнулся, заключается в том, что CSS
отключен, но Javascript включен. Что-то странное происходит со списком определений. Если вы знаете, как это исправить, дайте мне знать.
Я бы хотел, чтобы это заработало.</p><center><ins class="adsbygoogle"
style="display:block;height:250px"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="7192702265"
data-ad-format="link"
data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><p> Мне удалось наткнуться на еще одну попытку создания карты изображения на основе CSS, которая выглядит действительно великолепно. К сожалению,
из-за ограничений IE (в частности, с поддержкой только эффекта <code> :hover </code> для тега <code> <a> </code>),
он не совместим с разными браузерами (пока!).<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/webformyself.com/wp-content/uploads/2018/77/1.gif' /><noscript><img loading='lazy' src='/800/600/http/webformyself.com/wp-content/uploads/2018/77/1.gif' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></article><div class="sparkle-author-box"><div class="sparkle-author-image"> <img alt='' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' data-srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=520&d=mm&r=g 2x' class='lazy lazy-hidden avatar avatar-260 photo' height='260' width='260' /><noscript><img alt='' src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' class='avatar avatar-260 photo' height='260' width='260' /></noscript></div><div class="sparkle-author-details"> <span class="author-name"> <a href="https://art-nto.ru/author/alexxlab" title="Записи alexxlab" rel="author">alexxlab</a> </span> <span class="author-designation"> Автор записи </span><div class="author-desc"></div></div></div><nav class="navigation post-navigation"><div class="nav-links"><div class="nav-previous"><a href="https://art-nto.ru/raznoe/shablony-internet-magazinov-html-skachat-adaptivnyj-shablon-internet-magazina-besplatno.html" rel="prev">Шаблоны интернет магазинов html: Скачать адаптивный шаблон интернет-магазина бесплатно</a></div><div class="nav-next"><a href="https://art-nto.ru/raznoe/karta-mira-onlajn-so-stranami-krupno-karta-mira-so-stranami-krupnym-planom-na-russkom-2023.html" rel="next">Карта мира онлайн со странами крупно: Карта мира со странами крупным планом на русском 2023</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/hover-effect-map-area-css-adding-hover-effects-for-links-in-image-map-area.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://art-nto.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='58144' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><section id="secondaryright" class="home-right-sidebar widget-area" role="complementary"><aside id="search-2" class="widget clearfix widget_search"><form role="search" method="get" class="search-form" action="https://art-nto.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /></form></aside><aside id="categories-3" class="widget clearfix widget_categories"><h2 class="widget-title"><span>Рубрики</span></h2><ul><li class="cat-item cat-item-9"><a href="https://art-nto.ru/category/vektor">Вектор</a></li><li class="cat-item cat-item-5"><a href="https://art-nto.ru/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-10"><a href="https://art-nto.ru/category/maket">Макет</a></li><li class="cat-item cat-item-7"><a href="https://art-nto.ru/category/programm">Программ</a></li><li class="cat-item cat-item-3"><a href="https://art-nto.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-6"><a href="https://art-nto.ru/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://art-nto.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-8"><a href="https://art-nto.ru/category/urok">Урок</a></li><li class="cat-item cat-item-4"><a href="https://art-nto.ru/category/shrift">Шрифт</a></li></ul></aside></section></div></div></div><footer id="colophon" class="site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"><div class="footer-social"><div class="sparkle-wrapper"></div></div><div class="copyright-footer"><div class="sparkle-wrapper"><div class="footer_text"><div id="c_copyright"><p>© 2019. <a href="http://art-nto.ru/" title="Независимое театральное объединение "Зрительские симпатии"">Независимое театральное объединение "Зрительские симпатии"</a></p><p class="text">Все права защищены и охраняются законом Российской Федерации об Авторском праве. Копирование материала разрешено только с использованием ссылки на Art-Nto.ru</p><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div></div></div><div class="scroll-to-top"> <i class="icofont fa fa-angle-up"></i></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://art-nto.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --></body></html>
Если вы ищете
более простой способ создания карт изображений, включающих одно изображение, вы можете
заинтересован в чтении Карты изображений CSS, Redux