Как показать предварительный просмотр в небольшом всплывающем окне со связанной страницей при наведении мыши на ссылку?

Question

Как показать предварительный просмотр в небольшом всплывающем окне со связанной страницей при наведении мыши на ссылку?

как это

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

но предварительный просмотр

Answer 1

Вы можете использовать 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;
}

Вот пример с несколькими ссылками предварительного просмотра .

Answer 2

Вы можете отобразить предварительный просмотр ссылки, используя 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.

Answer 3

Лично я бы избежал iframes и пошел бы с тегом вставки, чтобы создать представление в окне наведения мыши.

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

Answer 4

Другим способом является использование службы предварительного просмотра миниатюр / ссылок на веб-сайте LinkPeek (даже сейчас можно увидеть скриншот StackOverflow в качестве демонстрационной версии), URL2PNG , Browshot , Websnapr или альтернатива .

Answer 5

Я сделал небольшой плагин, чтобы показать окно iframe для предварительного просмотра ссылки. Все еще в бета-версии. Может быть, это подходит для вашего случая: https://github.com/Fischer-L/previewbox.

Answer 6

Вы можете сделать следующее:

1. Создание (или поиск) службы, которая отображает URL-адреса в качестве изображений для предварительного просмотра
2. Загрузите это изображение при наведении мыши и покажите его
3. Если вы одержимы желанием быть вживую, используйте плагин Timer для jQuery, чтобы через некоторое время перезагрузить образ

Конечно, это на самом деле не в прямом эфире.

Что может быть более разумным, так это то, что вы можете создавать предварительные изображения для определенных URL-адресов, например, каждый день или каждую неделю и использовать их. Я представляю, что вы не хотите делать это вручную и не хотите показывать пользователям вашего сервиса предварительный просмотр, который выглядит совершенно иначе, чем выглядит сайт в настоящее время.