Untitled

<!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>