Tim Cooley
Tim Cooley

Reputation: 759

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

<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.

Upvotes: 5

Views: 21113

Answers (6)

Prabhakaran Parthipan
Prabhakaran Parthipan

Reputation: 4273

try this code..

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

Upvotes: 0

Harry Joy
Harry Joy

Reputation: 59650

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.

Upvotes: 3

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

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;
}

Upvotes: 0

mimmi
mimmi

Reputation: 113

Try this:

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

Upvotes: 1

Avinash
Avinash

Reputation: 2005

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

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

Upvotes: 2

Siddiqui
Siddiqui

Reputation: 7840

Try this

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

Upvotes: 2

Related Questions