1 изображение 2 ссылки

Question

Как сделать изображение кликабельным в HTML в разных областях изображения и привести к различным URL-адресам... например, у меня есть изображение или "кнопка", если вы хотите, чтобы это было 1 изображение, но я хочу, чтобы оно на самом деле было 2 ссылки... одна сторона кнопки "зарегистрироваться", а другая сторона "попробовать"

Answer 1

Используйте CSS-спрайты

Я думаю, что лучше всего использовать CSS-спрайт: http://www.jsfiddle.net/pereskokov/vVhde/1/. Главное преимущество его использования - ваше изображение не будет частью контента, это просто декор. Так что ваш контент будет доступен. Также вы можете легко изменить оформление вашего сайта через CSS и использовать другое изображение.

С помощью map оправдано только тогда, когда изображение является частью контента - например, это настоящая карта:)

HTML

<a href="#login" title="Log In" id="login"><span></span>Log In</a>
<a href="#signin" title="Sign In" id="signin"><span></span>Sign In</a>

CSS

#login, #signin {
    width: 50px;
    height: 27px;
    overflow: hidden;
    position: relative;
    display: block;
    float: left;
}

#login span {
    width: 50px;
    height: 27px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://dl.dropbox.com/u/5988007/sprite.png) 0 0 no-repeat;
}

#signin span {
    width: 50px;
    height: 27px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://dl.dropbox.com/u/5988007/sprite.png) -50px 0 no-repeat;
}

Answer 2

Используйте карты изображений HTML: http://www.javascriptkit.com/howto/imagemap.shtml

Пример:

<img src="button.gif" usemap="#yourmap" border="0">
<map name="yourmap">
<area shape="rect" coords="0,0,50,50" href="http://www.yoursite.com/link1.html">
<area shape="rect" coords="50, 0, 100, 100" href="http://www.yoursite.com/link2.html">
</map>