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
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.
http://jsbin.com/urarem/3/edit
HTML:
This live preview for Wikipedia remains open on mouseover.
CSS:
.box{ display: none; width: 100%; } a:hover + .box,.box:hover{ display: block; position: relative; z-index: 100; }
You can display a live preview of a link using javascript using the code below.
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.
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.
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.
You could do the following:
Of course this isn't actually live.
What would be more sensible is that you could generate preview images for certain URLs e.g. every day or every week and use them. I image that you don't want to do this manually and you don't want to show the users of your service a preview that looks completely different than what the site currently looks like.
Personally I would avoid iframes and go with an embed tag to create the view in the mouseover box.