How do I make just the image clickable and not the whole div?

Question

<div class="r1">
    <a href="http://..."><img src="..." />
        <div class="text1">TEXT</div>
    </a>
</div>

This is the mark up I am using. The problem I am having is that the DIV (the whole box) is becoming a hyperlink. I only want the image to hyperlink. The images I am using are more like triangles in a circle so you have some over lap of the boxed div.

The text portion is in a div [because I am a newb and that made since to me to put it like that] and also because the words are at angles for example like a 44 degree angle to fit inside the triangle like images.

Answer 1

Your div is reacting to hyperlink cause you have whole inner div inside the a tag. Try shifting </a> at the end of <img> tag. Something like this:

<div class="r1">
    <a href="http://..."><img src="..." /></a>
    <div class="text1">
         TEXT
    </div>
</div>

---

Based on your comment, it seems like you want to have hyperlink on both image and text. If so then what you are doing is perfectly fine. It might visually look like you clicked on whole outer div, but you did not clicked on outer div you actually clicked on contents inside it, it's because you don't have anything else inside outer div.

Answer 2

Try this

<div class="r1">
    <a href="http://..."><img src="..." /></a>
        <div class="text1">
            TEXT
        </div>
</div>

Answer 3

your syntax was wrong try this.......

  <div class="r1">
  <a href="http://..."><img src="..." /></a>
  <div class="text1">
        TEXT
  </div>
  </div>

Answer 4

Try this:

<div class="r1">
<a href="http://..."><img src="..." /></a>
<div class="text1">
TEXT
</div>
</div>

Answer 5

try this code..

<div class="r1">
  <div>   
     <a href="http://..."><img src="..." /></a>
  </div>
  <div class="text1">
    TEXT
  </div>
</div>

Answer 6

Hey now used to this as like this

HTml

<div class="r1">
    <a href="http://..."><img src="..." /></a>
    <div class="text1">
         TEXT
    </div>
</div>

and now css used to this

.r1 > a{
display:inline-block;
}

.r1 > a, .r1 > a img{
vertical-align:top;
}