View Full Version : 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. :confused:
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:
<!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. :D
regards,
jjstccean.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.