jQuery - Ajax infobulle, aimerait tirer URL au lieu de l'image statique

Question

En utilisant le code de this site

this.screenshotPreview = function(){ 
    /* CONFIG */ 

     xOffset = 10; 
     yOffset = 30; 

     // these 2 variable determine popup's distance from the cursor 
     // you might want to adjust to get the right result 

    /* END CONFIG */ 
    $("a.screenshot").hover(function(e){ 
     this.t = this.title; 
     this.title = "";  
     var c = (this.t != "") ? "<br/>" + this.t : ""; 
     $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");         
     $("#screenshot") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn("fast");       
    }, 
    function(){ 
     this.title = this.t;  
     $("#screenshot").remove(); 
    }); 
    $("a.screenshot").mousemove(function(e){ 
     $("#screenshot") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });   
}; 


// starting the script on page load 
$(document).ready(function(){ 
    screenshotPreview(); 
}); 

Le CSS

#screenshot{ 
    position:absolute; 
    border:1px solid #ccc; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 
    } 

L'appel:

<p>In order to test screenshot preview roll over the <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a> link.</p> 
    <p>If you want to see screenshot with caption, roll over this <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">Css Globe</a> link.</p> 

Voulait savoir si je voudrais fecth une URL au lieu d'une image? Example Site

Answer 1

La documentation du lien fourni dit ceci:

Cela demande un peu plus d'efforts, mais il pourrait valoir la peine comme une fonctionnalité supplémentaire pour ajouter à vos sites. Ce dont vous aurez besoin voici une capture d'écran de petite taille de l'URL cible . Vous allez mettre la capture d'écran emplacement de l'image dans l'attribut REL de l'étiquette A et le script fera le reste.

Et le second exemple de lien que vous avez fourni un exemple de ce qui précède: il ne saisit pas un instantané d'une URL, ce qui est impossible de toute façon que ajax interdomaine est impossible sans jsonp.

, utilisez l'appel dans votre question:

<p>In order to test screenshot preview roll over the <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a> link.</p> 
<p>If you want to see screenshot with caption, roll over this <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">Css Globe</a> link.</p> 

Prenez les captures d'écran des URL que vous êtes intéressé à montrer dans vos infobulles, et mettre les sources dans les attributs rel de ces liens. Si vous voulez une légende, fournissez un attribut title. C'est à peu près tout ce qu'il y a à faire!