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

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

comme celui-ci

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

mais vivre aperçu

Source

2010-01-22 Jitendra Vyas

Par aperçu en direct voulez-vous dire une vidéo? Vous pouvez placer n'importe quoi dans une fenêtre contextuelle intégrée (objet, balise vidéo HTML5, img, etc.). Vous pourriez peut-être avoir quelque chose côté serveur où il prend un lien via GET et renvoie une image miniature de ce lien, puis inclure cette image onmouseover. – Tom

quelque chose comme ça http://interclue.com/tour-intro.html –

@JitendraVyas Le lien semble être cassé maintenant. –

Vous ne pouvez pas faire une prévisualisation en direct d'une page liée en Javascript, mais vous pouvez show the page in an iframe on mouseover.

Source

2010-01-22 12:08:37 kjagiello

mais alors comment un plugin firefox fait cela comme http://interclue.com/tour-get-interclue.html –

Ces plugins utilisent l'API du navigateur pour le faire. Vous pourriez faire un tel aperçu pour tous les utilisateurs, mais vous auriez à écrire un script côté serveur qui générerait un tel aperçu en direct. – kjagiello

Cela dépend de ce que signifie "aperçu en direct" dans ce contexte. Que voulez-vous dire par "aperçu en direct"? (Si "aperçu en direct" signifie un iframe qui contient un aperçu de la page, alors il est très facile de le faire en utilisant HTML et CSS. [Voir ma réponse ici.] (Http://stackoverflow.com/a/16625709/975097) –

Vous pouvez effectuer les opérations suivantes:

Créer (ou trouver) un service qui rend les URL sous forme d'images de prévisualisation
charge cette image de la souris et le montrer
Si vous êtes obsédé par être en direct, puis utilisez un plug-in Timer pour que jQuery recharge l'image après un certain temps

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

Quelle serait plus raisonnable est que vous pouvez générer des images de prévisualisation pour certaines URL par exemple tous les jours ou toutes les semaines et utilisez-les. J'ai l'image que vous ne voulez pas faire cela manuellement et vous ne voulez pas montrer aux utilisateurs de votre service un aperçu qui semble complètement différent de ce que le site ressemble actuellement.

Source

2010-01-22 12:18:39

J'ai trouvé ce http://thumbnails.iwebtool.com/demo/ dans une question similaire, mais ça ne fonctionne pas http://stackoverflow.com/questions/80313/how-do-i-preview-a-url-using-ajax –

Vous pouvez utiliser un iframe pour afficher un aperçu de la page sur mouseover.

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

Here's an example with multiple link previews.

Source

2013-05-18 15:05:04

Excellente solution. Ma seule requête serait, pouvez-vous faire en sorte que l'iframe qui apparaît lorsque vous passez la souris sur le lien reste visible si vous déplacez votre souris sur la page qui est en cours d'affichage? Dans [ce jsfiddle] (http://jsfiddle.net/mcdqt/867/) J'ai modifié votre exemple avec la façon dont je voudrais qu'il soit disposé, mais ce serait idéal si, quand la page apparaît, vous pouvez déplacer votre souris dessus et elle reste visible (ainsi vous pouvez sélectionner le texte, par exemple, sans ha ving pour naviguer vers la page). Merci d'avance! – Luke

@Luke J'ai corrigé ce problème: voir la version mise à jour de ma réponse. –

parfait. Un grand merci – Luke

je l'ai fait un petit plugin pour afficher une fenêtre iframe pour afficher un aperçu d'un lien. Toujours en version bêta. Peut-être adapté à votre cas: https://github.com/Fischer-L/previewbox.

Source

2014-03-07 05:08:06 Fischer

Une autre façon est d'utiliser une vignette site/lien service aperçu LinkPeek (qui arrive même à montrer une capture d'écran de StackOverflow comme une démo en ce moment), URL2PNG, Browshot, Websnapr, ou un alternative.

Source

2014-07-03 18:57:15

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

<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 sur ce à Codegena

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

Source

2015-08-13 16:45:25

J'ai implémenté ce script sur un site Web. C'est génial mais j'ai des problèmes pour importer des pages FB –

Personnellement, j'éviter les iframes et aller avec une balise embed pour créer la vue dans la zone de passage de la souris.

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

Source

2016-03-19 14:47:49 user3347064

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

Répondre

Questions connexes