Блог

Главная - Вопросы по программированию - Можно ли использовать точки доступа к изображениям? Это лучший способ сделать это в современном мире?

Можно ли использовать точки доступа к изображениям? Это лучший способ сделать это в современном мире?

#html #css #imagemap

#HTML #css #imagemap

Вопрос:

У меня есть картинка, которую нужно разделить на 4 части, и у каждой части должна быть ссылка. Люди все еще используют точки доступа к изображениям?

Комментарии:

1. Просто чтобы уточнить, под «точками доступа» вы имеете в виду карты изображений HTML? w3schools.com/tags/tag_map.asp

2. Некоторым вашим пользователям, возможно, будет приятнее, если вы разделите картинку на четыре отдельных изображения, а затем с помощью CSS positioning соберете их в одно изображение! Извините, что не даю конкретного ответа, но я был весьма удивлен, увидев здесь кого-то по имени Роб Груска!

3. Хах, интересно. Я раньше не видел фамилию «Глуска», но сходство интригует :).

Ответ №1:

Я предполагаю, что вы говорите о картах изображений на стороне клиента.

Они все еще используются и являются частью HTML 4.01 и XHTML 1.1, а также в текущем проекте HTML 5.

Они просты в использовании и поддерживаются всеми браузерами и, как таковые, являются хорошим способом создания «горячих точек» на одном изображении. Я не могу придумать ни одной лучшей альтернативы (простота использования, поддержка браузера, доступность, являющаяся частью спецификации HTML), которая предоставит вам эту функциональность.

Целесообразно ли наличие таких «горячих точек» на одном изображении (основной проблемой является возможность обнаружения пользователем) — это другой вопрос.

Ответ №2:

На мой взгляд, использование изображений в качестве ссылок неубедительно; это может ухудшить доступность и, в зависимости от используемого изображения, может привести к навигации Mystery Meat, что неубедительно.

Вместо этого я бы сделал это изображение фоновым.

HTML

 <div id="image-hotspot">
    <a href="#small-planets">Small Planets</a>
    <a href="#big-planets">Big Planets</a>
    <a href="#the-sun">The Sun</a>
</div>

CSS

 #image-hotspot {
    background:url(http://onlyfunnyjokes.com/bestoftheweb/wp-uploads/earth_planets_size_comparison.jpg);
    height:650px;
    width:385px;
}
#image-hotspot a {
    display:block;
    text-indent:-10000px; /* you could also change the opacity instead*/
                          /* as a matter of fact I suggest using the opacity technique */
                          /* the text-indent has caused me troubles in the iPad browser */
    height:216px;
}

Возможно, вам потребуется использовать более совершенное позиционирование CSS, чтобы убедиться, что эти элементы привязки <a> находятся там, где вам нужно.

Добавление

Вот еще один пример, который должен показаться более уместным:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title >Test</title>
    <style type="text/css">
    #image-hotspot {
        background:url(http://upload.wikimedia.org/wikipedia/commons/c/c4/Planets2008.jpg);
        height:720px;
        width:1280px;
        position:relative;
        top:0px;
        left:0px;
    }
    #image-hotspot a#the-sun {
        display:block;
        text-indent:-10000px;
        height:720px;
        width:200px;
        position:absolute;
        left:0px;
        top:0px;
    }
    #image-hotspot a#mercury {
        display:block;
        text-indent:-10000px;
        height:25px;
        width:25px;
        position:absolute;
        left:225px;
        top:275px;
    }
    #image-hotspot a#venus {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:40px;
        position:absolute;
        left:265px;
        top:250px;
    }
    #image-hotspot a#earth {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:45px;
        position:absolute;
        left:325px;
        top:250px;
    }
    #image-hotspot a#mars {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:45px;
        position:absolute;
        left:383px;
        top:250px;
    }
    #image-hotspot a#jupiter {
        display:block;
        text-indent:-10000px;
        height:125px;
        width:135px;
        position:absolute;
        left:450px;
        top:225px;
    }
    #image-hotspot a#saturn {
        display:block;
        text-indent:-10000px;
        height:125px;
        width:195px;
        position:absolute;
        left:610px;
        top:225px;
    }
    #image-hotspot a#uranus {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:60px;
        position:absolute;
        left:805px;
        top:250px;
    }
    #image-hotspot a#neptune {
        display:block;
        text-indent:-10000px;
        height:75px;
        width:60px;
        position:absolute;
        left:887px;
        top:250px;
    }
    </style>
</head>
<body>
    <div id="image-hotspot">
        <a id="the-sun" href="#the-sun">the sun</a>
        <a id="mercury" href="#mercury">mercury</a>
        <a id="venus" href="#venus">venus</a>
        <a id="earth" href="#earth">earth</a>
        <a id="mars" href="#mars">mars</a>
        <a id="jupiter" href="#jupiter">jupiter</a>
        <a id="saturn" href="#saturn">saturn</a>
        <a id="uranus" href="#uranus">uranus</a>
        <a id="neptune" href="#neptune">neptune</a>
        <!-- <a id="pluto" href="#pluto">pluto</a> -->
    </div>
</body>
</html>

Ответ №3:

Вы можете использовать карты изображений, основная причина, по которой они людям не нравятся, заключается в том, что люди часто отображают небольшую часть изображения, а вы не знаете, что это ссылка. Если можете, просто оберните каждое изображение соответствующим образом <a href='link'>img</a>