CODEWITHSUNDEEP
htmlcssimagehyperlink
sclg
sclg

Reputation: 56

Images not showing as a hyperlink

I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.

Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...

<td>
<div class="sg-read-more">
<a href="#">Find out more</a>
</div>
<div class="sg-book-ticket">
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">Book Ticket</a>
</div>
</td>

The CSS is this....

div.sg-book-ticket {
        display:block;
        position:absolute;  
        background:url(images/buy-ticket.png) no-repeat 0 0; 
        right:15px;
        bottom:2px; 
        width:80px;
        height:40px;
        text-indent:-9999px;
        }

div.sg-book-ticket:hover {
background-position:0 -40px;
        }

The images display correctly and the rollover works, but they aren't links.
What have I missed?

Upvotes: 0

Views: 87

Answers (3)

Gerwin
Gerwin

Reputation: 1612

Can you try the following?:

<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>

instead of putting the image in the css?

Upvotes: 0

Refilon
Refilon

Reputation: 3489

if you want the whole div to be clickable, use this :

<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>

Upvotes: 0

Oliverb
Oliverb

Reputation: 142

I personally would style the link as opposed to the div 

div.sg-book-ticket{
 position:absolute;  
 right:15px;
 bottom:2px; 
}  
div.sg-book-ticket > a{
    display:block;       
    background:url(images/buy-ticket.png) no-repeat 0 0;       
    width:80px;
    height:40px;
    text-indent:-9999px;
}

div.sg-book-ticket a:hover{
    background-position:0 -40px;
}

Upvotes: 1

Related Questions