Why doesn't a href link work while an onClick link does?

Question

In my jquery slider here, I am trying to wrap the images in tags with href links. They are unresponsive. However, onclick="javascript:self.location.href='http://hodaradesign.com/'; return false;" works fine. Why is that?

Doesn't work:

<a href="hodaradesign.com"><img id="book2" class="book" src="book2.png" /></a>

Works:

<img id="book3" class="book" src="book3.png" onclick="javascript:self.location.href='http://hodaradesign.com/'; return false;" />

Live demo:

http://www.freewaycreative.com/jsfun/fiddle.html

Any ideas?

Answer 1

well this looks somewhat like spaghetti code.

you dont need the javascript: handler in an onclick event as its already a javascript event. furthermore the return false in the onclick event will prevent the link from beeing followed if javascript is enabled and executed correctly.

something like this or some other listener is probably your problem.

Answer 2

you specified the href attribute on the <img> tag instead of the <a> tag.

it should be:

<a href="http://hodaradesign.com"><img id="book2" class="book" src="book2.png" /></a>

if you return false in a onlckick event handler, the event es bing prevented from being executed. in this case opening the link.

Answer 3

Because your slider doesn't know or care about the <a...> element, it's only looking at elements with the class set to book !

Try this:

<a  href="hodaradesign.com">
  <img id="book2" src="book2.png" />
</a>