CODEWITHSUNDEEP
html
montocore
montocore

Reputation: 1

Why can't I make clickable links for my HTML code?

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>

Upvotes: 0

Views: 109

Answers (3)

montocore
montocore

Reputation: 1

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.

Upvotes: 0

mongotop
mongotop

Reputation: 5774

change the 100% with less value like 10%, the image is hidden the link, thats why you cannot click it.

Upvotes: 0

Bitwise Creative
Bitwise Creative

Reputation: 4105

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>

Upvotes: 1

Related Questions