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

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

4 голосов
/ 12 августа 2010

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

Ответы [ 3 ]

8 голосов
/ 12 августа 2010

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

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

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

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

7 голосов
/ 12 августа 2010

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

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

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>
0 голосов
/ 12 августа 2010

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

...