jQuery…

Always wanna write about some common stuff in jQuery. There are many ways to achieve this functionality and the one I am going to write today is one of themJ. Any scope for improvement is always welcome

We always get around this requirement of providing extra info on Mouse hover of an image or on click. We had an requirement to show description over mouse hover. I quickly created an approach using jQuery (rather than css à don’t wanna face browser incompatibility )

Here is the code---> which is very straight forward and could be understood very easily.. ahhh an explanation for being lazy today :) 

<img id='img_Forhover' src=’ /myImageForDemo.png'/> <style type="text/css">                 .div-img-overlay {                                 z-index:1000;                                 background-color:#000;                                 color:#fff;                                 padding: 1px 10px 1px 10px;                 } </style> <div class="div-img-overlay"> <h4>This is my title</h4> <p>A description of the image. A description of the image on the second line.</p> </div> <script type='text/javascript'> $(document).ready(function() {                 var mytop = -99;                 $('.div-img-overlay').hide();                 $('#img_Forhover').hover(function() {                                 if(mytop == -99) {                                                 var imgDiv = $('.div-img-overlay');                                                 var imgElem = $('#img_Forhover');                                                 var offset = imgElem.offset();                                                 imgDiv.width(imgElem.width()-20);                                                 mytop = offset.top + imgElem.height() - imgDiv.height()-2;                                                 $('.div-img-overlay').css({position:"absolute"});                                                 $('.div-img-overlay').offset({top: mytop, left: offset.left});                                 }                                 $('.div-img-overlay').show();                                 $('.div-img-overlay').fadeTo(20, 0.75);                                 }, function(){                                                 $('.div-img-overlay').hide();                                 });                 }); </script>