<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function () {
$("img").each(function(i){
//creates a div after each each
$(this).attr("data-indexer", i);
var layer = $("<div class='layer' data-indexer='" + i + "'><a href='http://www.google.com/' class='link'>Link</a></div>")
$(this).after(layer);
});
});
$(window).load(function() {
$("img[data-indexer]").each( function() {
//sets the position and size of each div properly
var position = $(this).offset();
var indexer = $(this).attr("data-indexer");
$("div[data-indexer=" + indexer + "]")
.css("width", this.clientWidth + "px")
.css("height", this.clientHeight + "px")
.css(position);
});
$("img").mouseenter(function() {
//once the image is hovered, the div should appear
var indexer = $(this).attr("data-indexer");
$("div[data-indexer=" + indexer + "]").show();
});
$("div[data-indexer]").mouseleave( function() {
//once the mouse leaves the div, it should be hidden
//THIS DOESN'T WORK ON IE7-8
$(this).hide();
});
});
})(jQuery);
</script>
<style type="text/css">
.layer {
background-color: rgb(255, 255, 0);
z-index: 200;
display: none;
position: absolute;
}
.link {
position: absolute;
display:block;
left: 10px;
top: 10px;
width: 100px;
height:20px;
background-image: url("http://www.placekitten.com/100/20");
text-indent: -99999px;
}
</style>
</head>
<body>
<img src="http://www.placekitten.com/400/300" alt="A kitten">
<br/>
<a href="http://www.google.com"><img src="http://www.placekitten.com/500/200" alt="Another kitten"></a>
</body>
</html>