Какой лучший способ использования изображения в качестве ссылки

Question

Какой лучший способ использования изображения в качестве ссылки ..

<A HREF="javascript:password()"> 
<IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A> 

или то же самое, используя OnClick в IMG тег ?? Какой из них желательно? Оба одинаково хороши в использовании?

Answer 1

Есть три распространенных методов:

1. a с href="javascript:whatever()"
2. a с
3. img с onclick="whatever()"

(1) и (2) будет создавать штриховой фокус границы вокруг изображения при щелчке, иногда это нежелательно.

(1) и (2) добавляет границу вокруг изображения того же цвета, что и ссылки в документе, поэтому вы можете установить border = 0.

(1) и (2) отобразит указатель руки на мыши.

(3) не ведет себя ничего похожего на ссылку ... без границы фокуса, без ссылки цвета borderm no hand pointer, ничего не отображается в строке состояния при наведении указателя мыши.

Лично я бы выбрал вариант 3: используйте тег a для ссылок, которые доставят вас где-нибудь, не используйте их в качестве кнопок действий.

Answer 2

Я поклонник хорошей семантики. <a> был разработан, чтобы быть ссылкой, поэтому я советую использовать его: D

Answer 3

Использование a-тега, вы можете сделать код работающим, если у пользователя нет встроенного javascript! Поэтому я бы пошел за тегом, но также помню, что вы могли бы использовать jQuery или подобное, чтобы получить эффект javascript при нажатии на ссылку.

Answer 4

Я бы пошел с якорем (A тег), запретив действительно вескую причину сделать что-то еще. Связывание - это то, что якоря - это для, и поэтому вы получаете преимущества доступности и т. Д.

Answer 5

Я буду звонить вместе с остальными, что вы всегда должны использовать семантический подход. Если посмотреть на значение href, тем не менее, похоже, что вы на самом деле не связываете с чем угодно, но ваш тег a выполняет действие.

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

<input type="image" src="pict1.gif" onclick="password();" /> 

Одним из примеров того, почему вы хотите, чтобы заботиться о семантике (по общим причинам SEO исключением) является то, что вы сообщаете браузеру, как к тому, что происходит. Например, кнопка изображения, как в приведенном выше коде, или изображение в якоре, как в вашем вопросе, приведет к тому, что на изображении будет отображаться курсор pointer, тогда как вам придется явно стилизовать это поведение, если вы пошли с простое решение img onclick, эффективно реплицирующее то, что браузер может обрабатывать изначально.

Answer 6

Для доступа вы должны использовать якорный тег. Вы можете стилизовать его для отображения изображения т.е.

<style> 
    a.image {display:block; background-image: url('images/mypic.gif')} 
</style> 

<a class='image' href='acme.html' style=></a> 

(Это, возможно, потребуется ширину и высоту, а)

Кроме того, JQuery обеспечит истинное разделение задач следует, что вам нужно добавить дополнительную обработку в щелчок. (Пожалуйста, не пламя о OP не используя JQuery, я представить его здесь в качестве подхода, поскольку вопрос немного субъективны и о наилучшей практике)

$(document).ready(function() { 

    $(a.image).click(function(e) { 
    password(); 
    e.preventDefault(); 
    }); 
}); 

Answer 7

Я отговорить обоих подходов. Логика, представление и структура всегда должны быть раздельными. Сделайте это вместо того, чтобы:

myClickable.addEventListener('click', password, false); 

Answer 8

, если его просто ссылку, то якорь будет хорошо работать для вас, но кнопка будет лучше, если у вас есть какая-либо операция будет сделано, и не только переназначение.