Якорные ссылки в хидере сайта

Рейтинг: -1Ответов: 1Опубликовано: 29.03.2023

В header.php на сайте в вордпрессе я разместил код

<header id="masthead" class="site-header" role="banner">
<img src="https://teannuals.club/wp-content/uploads/2023/03/header.png" width="1049" height="134" usemap="#tea">
<map name="tea">
    <a href="https://teannuals.club/wanted">
        <area shape="rect" coords="0,134,197,134">
    </a>
     <a href="https://teannuals.club">
        <area shape="rect" coords="198,134,930,134">
    </a>
    <a href="https://youtu.be/EgGDjp3iDzU">
        <area shape="rect" coords="931,134,1049,134">
    </a>
</map>

        <nav id="site-navigation" class="themonic-nav" role="navigation">
            <a class="assistive-text" href="#main" title="<?php esc_attr_e( 'Skip to content', 'iconic-one' ); ?>"><?php _e( 'Skip to content', 'iconic-one' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'menu-top', 'menu_class' => 'nav-menu', 'container' => 'ul' ) ); ?>
        </nav><!-- #site-navigation -->
        <div class="clear"></div>
    </header>

но ссылки не работают. Кроме того, что надо сделать, чтобы на смартфоне/планшете эта картинка стала "резиновой"? Почему картинка с прозрачным фоном фонит? Заранее благодарен.

html png
Источник: Stack Overflow на русском

Ответы

▲ 0

Нужно добавить href в area, потому что map используется для создания кликабельных областей на изображении. area указывает на конкретную область на изображении и определяет, куда должен перейти пользователь, если он щелкнет на этой области

<a href="https://teannuals.club/wanted">
    <area href="https://teannuals.club/wanted" shape="rect" coords="0,134,197,134">
</a>
<a href="https://teannuals.club">
    <area href="https://teannuals.club" shape="rect" coords="198,134,930,134">
</a>
<a href="https://youtu.be/EgGDjp3iDzU">
    <area href="https://youtu.be/EgGDjp3iDzU" shape="rect" coords="931,134,1049,134">
</a>

Чтобы сделать картинку "резиновой" на мобильных устройствах и планшетах, используйте медиа-запросы и укажите для нее нужный width. Например для смартфонов:

@media only screen and (max-width: 767px) {
    #masthead img {
        width: 100%;
        height: auto;
    }
}