web-dev-qa-db-ja.com

リンク上のマウスオーバーでリンクされたページの小さなポップアップでライブプレビューを表示する方法

リンク上のマウスオーバーでリンクされたページの小さなポップアップでライブプレビューを表示する方法は？

このような

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

ライブプレビュー

javascriptjquerycssxhtml
21
Jitendra Vyas

Iframeを使用して、マウスオーバーでページのプレビューを表示できます。

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

複数のリンクプレビューを使用した例 。

40
Anderson Green

以下のコードを使用して、javascriptを使用してリンクのライブプレビューを表示できます。

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

詳細については Codegena をご覧ください

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

別の方法は、Webサイトのサムネイル/リンクプレビューサービスを使用することです LinkPeek （たまたまStackOverflowのスクリーンショットをデモとして表示することさえあります）、 URL2PNG 、 Browshot 、 Websnapr 、または alternative 。

2
Dan Dascalescu

個人的には、iframeを避けて、埋め込みタグを使用して、マウスオーバーボックスにビューを作成します。

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

リンクをプレビューするiframeウィンドウを表示する小さなプラグインを作成しました。まだベータ版です。多分それはあなたのケースに合っています： https://github.com/Fischer-L/previewbox 。

1
Fischer

次のことができます。

  1. URLをプレビュー画像としてレンダリングするサービスを作成（または検索）します
  2. マウスオーバーでその画像をロードして表示します
  3. ライブに執着している場合は、jQueryのタイマープラグインを使用して、しばらくしてからイメージをリロードしてください。

もちろん、これは実際にはライブではありません。

より賢明なのは、特定のURLのプレビュー画像を生成できることです。毎日または毎週使用します。手動でこれを行いたくないし、サービスのユーザーに、現在のサイトの外観とはまったく異なるプレビューを表示したくないと思います。

0
Aleksi Yrttiaho