web-dev-qa-db-fra.com

Comment afficher l'aperçu en direct dans une petite fenêtre contextuelle de la page liée lorsque vous passez la souris sur le lien?

Comment afficher l'aperçu en direct dans une petite fenêtre contextuelle de la page liée en passant la souris sur le lien?

comme ça

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

mais aperçu en direct

javascriptjquerycssxhtml
21
Jitendra Vyas

Vous pouvez utiliser un iframe pour afficher un aperçu de la page au survol de la souris.

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

Voici un exemple avec plusieurs aperçus de liens .

40
Anderson Green

Vous pouvez afficher un aperçu en direct d'un lien en utilisant javascript en utilisant le code ci-dessous.

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

En savoir plus à ce sujet sur 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

Une autre façon est d'utiliser un service de prévisualisation de liens/vignettes de sites Web LinkPeek (il arrive même de montrer une capture d'écran de StackOverflow en tant que démo en ce moment), RL2PNG , Browshot , Websnapr , ou alternative .

2
Dan Dascalescu

Personnellement, j'éviterais les iframes et j'irais avec une balise intégrée pour créer la vue dans la zone de survol.

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

J'ai fait un petit plugin pour afficher une fenêtre iframe pour prévisualiser un lien. Toujours en version bêta. Peut-être que cela correspond à votre cas: https://github.com/Fischer-L/previewbox .

1
Fischer

Vous pouvez effectuer les opérations suivantes:

  1. Créer (ou trouver) un service qui rend les URL sous forme d'images d'aperçu
  2. Chargez cette image sur la souris et montrez-la
  3. Si vous êtes obsédé par le fait d'être en direct, utilisez un plug-in Timer pour jQuery pour recharger l'image après un certain temps

Bien sûr, ce n'est pas réellement en direct.

Il serait plus judicieux de générer des images d'aperçu pour certaines URL, par exemple tous les jours ou toutes les semaines et utilisez-les. J'imagine que vous ne voulez pas le faire manuellement et que vous ne voulez pas montrer aux utilisateurs de votre service un aperçu complètement différent de ce à quoi ressemble actuellement le site.

0
Aleksi Yrttiaho