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 over on link ?
like this
http://cssglobe.com/lab/tooltip/03/
but live preview
You can use an iframe to display a preview of the page on mouseover:
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}This live preview for <a href="https://en.wikipedia.org/">Wikipedia</a>
<div class="box">
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
</iframe>
</div>
remains open on mouseover.Here's an example with multiple live previews:
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}Live previews for <a href="https://en.wikipedia.org/">Wikipedia</a>
<div class="box">
<iframe src="https://en.wikipedia.org/" width = "500px" height = "500px">
</iframe>
</div>
and <a href="https://www.jquery.com/">JQuery</a>
<div class="box">
<iframe src="https://www.jquery.com/" width = "500px" height = "500px">
</iframe>
</div>
will appear when these links are moused over.You can display a live preview of a link using javascript using the code below.
<embed src="https://www.w3schools.com/html/default.asp" width="60" height="40" />
<p id="p1"><a href="http://cnet.com">Cnet</a></p>
<p id="p2"><a href="http://codegena.com">Codegena</a></p>
<p id="p3"><a href="http://apple.com">Apple</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
</script> <script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>Learn more about it at Codegena
id="p1" - Fetch image preview on page load.
id="p2" - Fetch preview on hover.
id="p3" - Fetch preview image each time you hover.
Another way is to use a website thumbnail/link preview service LinkPeek (even happens to show a screenshot of StackOverflow as a demo right now), URL2PNG, Browshot, Websnapr, or an alternative.
Personally I would avoid iframes and go with an embed tag to create the view in the mouseover box.
<embed src="http://www.btf-internet.com" width="600" height="400" />
I have done a little plugin to show a iframe window to preview a link. Still in beta version. Maybe it fits your case: https://github.com/Fischer-L/previewbox.