Wie kann man eine Live-Vorschau in einem kleinen Popup-Fenster der verlinkten Seite anzeigen, wenn man mit der Maus über einen Link fährt?

Question

Wie kann man eine Live-Vorschau in einem kleinen Popup-Fenster der verlinkten Seite anzeigen, wenn man mit der Maus über einen Link fährt?

wie diese

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

aber Live-Vorschau

Answer 1

Sie können einen iframe verwenden, um bei Mouseover eine Vorschau der Seite anzuzeigen:

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

Hier ist ein Beispiel mit mehreren Live-Vorschauen:

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

Answer 2

Sie können eine Live-Vorschau eines Links mit Javascript anzeigen, indem Sie den unten stehenden Code verwenden.

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

Erfahren Sie mehr darüber unter 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 3

Eine andere Möglichkeit ist die Nutzung eines Dienstes für die Vorschau von Miniaturansichten und Links auf Websites LinkPeek (zufällig wird gerade ein Screenshot von StackOverflow als Demo gezeigt), URL2PNG , Browshot , Websnapr oder ein alternativ .

Answer 4

Ich persönlich würde iframes vermeiden und ein Embed-Tag verwenden, um die Ansicht in der Mouseover-Box zu erstellen.

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

Answer 5

Ich habe ein kleines Plugin erstellt, das ein Iframe-Fenster zur Vorschau eines Links anzeigt. Noch in der Beta-Version. Vielleicht passt es für Ihren Fall: https://github.com/Fischer-L/previewbox .