Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 5th, 2013  |  syntax: HTML  |  size: 1.81 KB  |  hits: 20  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>Test</title>
  5.         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  6.         <script type="text/javascript">
  7.                 (function($){
  8.                         $(document).ready(function () {
  9.  
  10.  
  11.                                 $("img").each(function(i){
  12.  
  13.                                         //creates a div after each each
  14.  
  15.                                         $(this).attr("data-indexer", i);
  16.                                        
  17.                                         var layer = $("<div class='layer' data-indexer='" + i + "'><a href='http://www.google.com/' class='link'>Link</a></div>")
  18.  
  19.                                         $(this).after(layer);
  20.                                 });
  21.                                
  22.                         });
  23.  
  24.                         $(window).load(function() {
  25.  
  26.                                 $("img[data-indexer]").each( function() {
  27.  
  28.                                         //sets the position and size of each div properly
  29.  
  30.                                         var position = $(this).offset();
  31.  
  32.                                         var indexer = $(this).attr("data-indexer");
  33.                                         $("div[data-indexer=" + indexer + "]")
  34.                                                 .css("width", this.clientWidth  + "px")
  35.                                                 .css("height", this.clientHeight + "px")
  36.                                                 .css(position);
  37.                                 });
  38.  
  39.                                 $("img").mouseenter(function() {
  40.                                         //once the image is hovered, the div should appear
  41.                                         var indexer = $(this).attr("data-indexer");
  42.                                         $("div[data-indexer=" + indexer + "]").show();
  43.                                
  44.                                 });
  45.  
  46.                                 $("div[data-indexer]").mouseleave( function() {
  47.                                         //once the mouse leaves the div, it should be hidden
  48.                                         //THIS DOESN'T WORK ON IE7-8
  49.                                         $(this).hide();
  50.                                 });
  51.                         });
  52.                 })(jQuery);
  53.         </script>
  54.         <style type="text/css">
  55.                 .layer {
  56.                         background-color: rgb(255, 255, 0);
  57.                         z-index: 200;
  58.                         display: none;
  59.                         position: absolute;
  60.                 }
  61.                 .link {
  62.                         position: absolute;
  63.                         display:block;
  64.                         left: 10px;
  65.                         top: 10px;
  66.                         width: 100px;
  67.                         height:20px;
  68.                         background-image: url("http://www.placekitten.com/100/20");
  69.                         text-indent: -99999px;
  70.                 }
  71.         </style>
  72. </head>
  73. <body>
  74.         <img src="http://www.placekitten.com/400/300" alt="A kitten">
  75.         <br/>
  76.         <a href="http://www.google.com"><img src="http://www.placekitten.com/500/200" alt="Another kitten"></a>
  77. </body>
  78. </html>