Sunday, February 3, 2013

Tooltip show for Image Thumnail:

 
#large {
    background: none repeat scroll 0 0 #FEFEFE;
    border: 4px solid #45B6EA;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    display: none;
    padding: 5px;
    position: absolute;
}

<div id="box">
        <h3>Hover over the link</h3>
            
        <p id="large"></p>
<a title="/logo.png" class="jobimage" style="cursor:pointer;">image</a>
</div>  

$(document).ready(function ()
{
    $(".jobimage").hover(function(e){
            $("#large").css("top",(e.pageY+5)+"px")
                             .css("left",(e.pageX+5)+"px")                    
                             .html("<img src="+ $(this).attr("title") +" alt='Large Image' />")
                             .fadeIn("slow");
        }, function(){
            $("#large").fadeOut("fast");
        });    
    
});

Bind Some Event to Element and trigger that function when click the element

Scenario: Suppose if we used same click event function in various web pages. if you want do some logic some page button for that need to re...