I have an iframe that acts as a big button. The entire content inside of the iframe is one click target.
What I’d like to do is hover some piece of HTML over the iframe kind of like in this example.
<html>
<head>
<style>
iframe {
height: 100px;
width: 300px;
}
div {
position: relative;
}
a {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<iframe src="frame.html"></iframe>
<a id="text">Image</a>
</div>
</body>
</html>
You can also see a live example here http://dev.gjcourt.com/iframe
The problem is that I’d like to have click events from the anchor bubble down into the iframe. Is there any way to make this possible?
Position the iframe absolutely, make the background of the iframe transparent and give it a z-index higher than the text/other content.
Why are you using an iframe for this?