CODEWITHSUNDEEP
htmlcss
0xAX
0xAX

Reputation: 21837

Image as link doesn't work

I have <a> with background:

 <a class="link" href="/#/index"></a>

And css for it:

.link
{
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  text-indent: -9999px;
  background:  #fff url("/logo.png") no-repeat;
}

Image displays normally, but link doesn't work, when i hover on image cursor is default, not pointer, and page doesn't update after click.

Upvotes: 1

Views: 4985

Answers (4)

asvignesh
asvignesh

Reputation: 788

the text / object inside the tag will only have redirection link use 

<a><img></a>

or 

<img src="http://asvignesh.in/images/qrcode.png" onClick="window.location.href = 'http://asvignesh.in'" >

Upvotes: 0

Maloric
Maloric

Reputation: 5625

Your css class refers to .home but your link has a class of link.

Edit:

Just realized that you said the image displays properly (and you've already edited the class in the question).

However I tried your css and link on jsFiddle.net and it worked fine.

Edit 2:

Semantically speaking, having an empty link (even one with &nbsp;) is bad practice for screen readers and Google. Since you aren't using an actual image you can't rely on the alt tag, so you should add some descriptive text inside the link and then hide it like so:

HTML:

<a class="link" href="/#/index">This is my text</a>

CSS:

.link
{
  display: block;
  width: 50px;
  height: 50px;
  float: left;
  text-indent: -9999px;
  background:  #fff url("/logo.png") no-repeat;
  text-align:left;
  text-indent:-999em;
  overflow:hidden;
}

The text indent removes the text to the left while overflow:hidden ensures it will never be seen, and that the link clickable area doesn't trail off to the left.

Upvotes: 0

Yogus
Yogus

Reputation: 2272

The link 

<a class="link" href="/#/index"></a>

But for hover and link you need to display text 

<a class="link" href="/#/index">&nbsp;</a>

Upvotes: 3

Sukhpreet
Sukhpreet

Reputation: 117

put &nbsp; inside the a tag

<a class="link" href="/#/index">&nbsp;</a>

Upvotes: 5

Related Questions