Why can't I make clickable links for my HTML code?
Question
I want to make an image for my code a link so that people can click it, but whenever I upload the code to my file, I can never click it. Can someone please help? Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
img.transp {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<title>
Home - Stampycraft.net
</title>
</head>
<body>
<center>
<h1>
<a href="http://facebook.com"><img src="gaoosh.gif" /></a>
</h1>
</center>
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img class="transp" src=stampy6.png style='width:100%;height:100%' alt='[]' />
</div>
</body>
</html>
3 answers
solution1
1 2015-04-07 02:54:58
This is covering it:
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img class="transp" src=stampy6.png style='width:100%;height:100%' alt='[]' />
</div>
Remove that code and you'll see what I mean.
An alternative:
<div style='position:absolute;left:0;top:0;'>
<img class="transp" src=stampy6.png alt='[]' />
</div>
solution2
0 2015-04-07 03:02:45
用较小的值（例如10％）更改100％，图像将隐藏链接，这就是为什么您无法单击它。
solution3
0 2015-04-08 05:01:06
It turns out I found out a solution! The "z-index" part of my code is at 0 (which shows that it has higher priority over my image (gaoosh.gif). So, I inserted this handy piece of code and:
h1{
position: relative;
top: 30px;
left: 50px;
z-index: 1;
}
Voila! My image is now clickable. But anyways, I want to thank you all of you who helped answer my question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.