Jak wyświetlić podgląd na żywo w małym wyskakującym oknie połączonej strony za pomocą myszki na linku?

Question

Jak wyświetlić podgląd na żywo w małym wyskakującym oknie połączonej strony za pomocą myszki na linku?

jak ten

http://cssglobe.com/lab/tooltip/03/

ale żyć podgląd

Answer 1

nie można dokonywać żadnych żywo podgląd połączonej strony w JavaScript, ale można show the page in an iframe on mouseover.

Answer 2

Można wykonać następujące czynności:

1. Utwórz (lub znaleźć) usługę, która renderuje URL jako obrazy podglądu
2. Załaduj że obraz na myszy nad i pokazać go
3. Jeśli jesteś obsesyjno byciu na żywo, a następnie użyj wtyczki Timer do jQuery, aby ponownie załadować obraz po pewnym czasie.

Oczywiście nie jest to na żywo.

Co jest bardziej sensowne, można wygenerować obrazy podglądu dla niektórych adresów URL, np. każdego dnia lub każdego tygodnia i używaj ich. Obrazuję, że nie chcesz tego robić ręcznie i nie chcesz pokazywać użytkownikom swojej usługi podglądu, który wygląda zupełnie inaczej niż obecnie wygląda strona.

Answer 3

Możesz użyć elementu iframe do wyświetlenia podglądu strony po najechaniu myszą.

http://jsbin.com/urarem/3/edit

HTML:

This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover. 

CSS:

.box{ 
    display: none; 
    width: 100%; 
} 

a:hover + .box,.box:hover{ 
    display: block; 
    position: relative; 
    z-index: 100; 
} 

Here's an example with multiple link previews.

Answer 4

Zrobiłem małą wtyczkę, aby wyświetlić okno elementu iframe, aby wyświetlić podgląd łącza. Nadal w wersji beta. Może pasuje do Twojego przypadku: https://github.com/Fischer-L/previewbox.

Answer 5

Innym sposobem jest użycie internetowej miniatur/link podglądu usługę LinkPeek (nawet zdarza się, aby zobaczyć zrzut ekranu StackOverflow jako demo teraz), URL2PNG, Browshot, Websnapr, albo alternative.

Answer 6

Możesz wyświetlić podgląd na żywo łącza za pomocą javascript używając poniższego kodu.

<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>

Dowiedz się więcej na ten temat na Codegena

id="p1" - Fetch image preview on page load. 
id="p2" - Fetch preview on hover. 
id="p3" - Fetch preview image each time you hover. 

Answer 7

Osobiście wolałbym uniknąć iframes i iść z znacznika embed, aby utworzyć widok w oknie mouseover.

<embed src="http://www.btf-internet.com" width="600" height="400" />