Which is a better way of using the image as link..

Question

Which is the better way of using the image as a link..

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

or the same thing using onClick in the img tag ?? Which one is advisable?? Are both equally good to use??

Answer 1

I'm a fan of good semantics. the <a> was designed to be a link so i advise to use it :D

Answer 2

Using an a-tag, you can make the code work if the user doesn't have javascript enabled! So I would go for the a tag, but also keep in mind that you could use jQuery or similar to get the javascript effect when clicking on the link.

Answer 3

I'd go with an anchor (A tag) barring a really good reason to do something else. Linking is what anchors are for, and so you get accessibility benefits, etc.

Answer 4

I'll chime in with the rest that you should always take a semantic approach. Looking at the value of href, though, it seems that you're not actually linking to anything, but rather, your a tag is performing an action.

In that case, your using an anchor as though it was a button, and the semantics is lost anyhow. I'd go with an image button:

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

One example of why you want to care about semantics (except for the general SEO reasons) is that you're instructing the browser as to what is going on. For instance, an image button as in the code above, or an image in an anchor as in your question, will both cause the image to have the pointer cursor when hovered, whereas you'd have to explicitly style that behavior if you went with the plain img onclick solution, effectively replicating something the browser can handle natively.

Answer 5

For accessibility you should use the anchor tag. You can style it to display an image ie

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

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

(That might need a width and height as well)

In addition, jQuery will provide a true separation of concerns should you need to add further processing in the click. (Please no flames about the OP not using jquery, I present it here as an approach since the question is slightly subjective and about best practices)

$(document).ready(function() {

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

Answer 6

I discourage both approaches. Logic, presentation and structure should always be separate. Do this instead:

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

Answer 7

if its merely a link then anchor would work well for you, but button will be better in case you have some operation to be done and not only redirection.

Answer 8

There are three common techniques:

1. a with href="javascript:whatever()"
2. a with href="#" onclick="whatever(); return false;"
3. img with onclick="whatever()"

(1) and (2) will create a dotted focus border around the image when its clicked, sometimes this is undesirable.

(1) and (2) adds a border around the image same color as the links in your document so you may want to set border=0.

(1) and (2) will display the hand pointer upon mouse over.

(3) does not behave anything like a link... no focus border, no link color borderm no hand pointer, nothing displayed in the status bar upon mouseover.

Personally, I'd go for option 3: use an a tag for links that take you somewhere, do not use them as action buttons.