javascript - texto - ventana emergente html

¿Cómo se muestra la vista previa en vivo en una pequeña ventana emergente de la página vinculada en el mouse sobre el enlace?

Question

¿Cómo se muestra la vista previa en vivo en una pequeña ventana emergente de la página vinculada en el mouse sobre el enlace?

Me gusta esto

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

pero vista previa en vivo

Answer 1

He hecho un pequeño complemento para mostrar una ventana iframe para previsualizar un enlace. Aún en versión beta. Tal vez se ajuste a su caso: https://github.com/Fischer-L/previewbox .

Answer 2

Otra forma es usar un servicio de vista previa de miniatura / enlace de sitio web LinkPeek (incluso sucede que muestra una captura de pantalla de como una demostración en este momento), URL2PNG , Browshot , Websnapr o una alternative .

Answer 3

Personalmente, evitaría iframes e iré con una etiqueta de inserción para crear la vista en el cuadro de mouseover.

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

Answer 4

Puede usar un iframe para mostrar una vista previa de la página al pasar el mouse.

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

Aquí hay un ejemplo con múltiples vistas previas de enlaces .

Answer 5

Puede visualizar una vista previa en vivo de un enlace utilizando JavaScript utilizando el siguiente código.

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

Aprenda más sobre esto en 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 6

Usted podría hacer lo siguiente:

1. Crear (o encontrar) un servicio que represente URL como imágenes de vista previa
2. Cargue esa imagen sobre el mouse y muéstrela
3. Si eres obsesivo con la vida, utiliza un complemento Timer para jQuery para volver a cargar la imagen después de un tiempo

Por supuesto, esto no es en realidad en vivo.

Lo que sería más sensato es que podría generar imágenes de vista previa para ciertas URL, por ejemplo, todos los días o cada semana y usarlas. Me imagino que no desea hacer esto manualmente y no desea mostrar a los usuarios de su servicio una vista previa que se ve completamente diferente de lo que parece el sitio actualmente.