Link behind an Image

**jjstccean** · 01-02-2009, 12:55 PM

How can I prevent the "link a" and "a:hover" from showing up behind an image?

Thank you.

jjstccean.

**Snookerman** · 01-02-2009, 02:23 PM

It depends what code you are using. You could use z-index or you could put the image in the background. If you want us to be able to help you:

Please post a link to the page on your site that contains the problematic script so we can check it out.

**jjstccean** · 01-02-2009, 02:55 PM

yep, I'm using <a Href="link">

thank you

jjstccean

**Snookerman** · 01-02-2009, 03:58 PM

That was not much info to work with so I made an example page to show you two possible ways you can show a link on top of an image:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            a {
                font-size: 200%;
            }
            
            /*Example one with image as background*/
            div#example-one {
                background: url(http://www.gamerflicks.com/images/uploads/ghostbusters_logo.gif) no-repeat;
                height: 283px;
                margin: 50px;
            }
            
            /*Example two with absolute positioning*/
            div#example-two {
                position: relative;
                margin: 50px;
            }
            
            div#example-two a {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <!--Example one with image as background-->
        <div id="example-one">
            <a href="http://www.google.com/">Google.com</a>
        </div>
        <!--Example two with absolute positioning-->
        <div id="example-two">
            <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
            <img src="http://www.cracked.com/blog/wp-content/uploads/2008/05/ghostbusters2.jpg" alt="Example two">
        </div>
    </body>
</html>

**jjstccean** · 01-05-2009, 06:38 AM

thank you kindly for the effort here. I've however sorted my problem with this very easy inline bit <img src="image.png" alt="image" border="0"> it's the border part that had me baffled. Now no link shows from behind the image.

regards,

jjstccean.

Thread: Link behind an Image

Thread Tools

Search Thread

Link behind an Image

The Following User Says Thank You to Snookerman For This Useful Post:

The Following User Says Thank You to Snookerman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions