How to Show Live Preview in a Small Popup of Linked Page on Mouse Over on Link

How to show live preview in a small popup of linked page on mouse click on link?

Not with an anchor tag, but you can use the checkbox hack to do that.

.box{

  width: 100%;

}

input, .box {

  display: none;

}

#checkbox:checked + .box {

  display: block;

  position: relative;

  z-index: 100;

}

<label for="checkbox">Click</label>

<input id="checkbox" type="checkbox">

<div class="box">

  <iframe src="http://en.wikipedia.org/" width="500px" height="500px"></iframe>

</div>

Show web page previews on mouseover

If you have a limited of static (or almost static pages), do screenshots, and use images.

Otherwise, use this jquery plugin :

http://craigsworks.com/projects/qtip/demos/content/thumbnail

Duplicate from : jQuery Webpage Preview

Preview page on link hover

You can use an iframe tag to display another page.

    <iframe src="http://www.example.com"></iframe>

Your HTML

 <a class="tiptext">A link
 <iframe class="description" src="http://www.example.com"></iframe>
 </a>

Your CSS

.tiptext {
    color:#069; 
    cursor:pointer;
}
.description {
    display:none;
    position:absolute;
    border:1px solid #000;
    width:400px;
    height:400px;
}

Your JS

$(".tiptext").mouseover(function() {
    $(this).children(".description").show();
}).mouseout(function() {
    $(this).children(".description").hide();
});

JSFiddle: http://jsfiddle.net/yboss/q29tP/

When a mouse over the link ,create a preview of a website?

Rather than loading the webpage in an iframe (which could be very slow).

Why don't you just display an img screenshot of the site using an external API such as:

http://www.thumbalizr.com/
http://www.bitpixels.com/
http://webshotspro.com/

Example:

http://api.thumbalizr.com/?url=http://www.google.com&width=250

Display Image on Link Hover

Here is a basic implementation of hover popup:

$('.names a').on('mouseenter', function(evt){
    $('.popup').css({left: evt.pageX+30, top: evt.pageY-15}).show();
    $(this).on('mouseleave', function(){
        $('.popup').hide();
    });
});

http://jsfiddle.net/CaQUY/

You can alter contents of the popup based on which element is hovered (for example, by using http://api.jquery.com/jQuery.data/ )

Example of using data attribute: http://jsfiddle.net/CaQUY/1/

Opening a popup with iFrame on mouseover

you could do something like this

Demo

the html:

<div id="hoverMe">Hover over here</div>
<iframe id="tooltip" src="http://jsfiddle.net"></iframe>

the jQuery:

$('#hoverMe').hover(function () {
    $('#tooltip').fadeIn();
}, function () {
    $('#tooltip').fadeOut();
});