• User Attivo

    Modifica al codice per il tooltip.js

    Con l'effetto tooltip di Jquery si ottiene questo effetto

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

    Si assoccia ad un link un'immagine.

      <div id="footer">
     <ul class="social"> 
    <li><a href="#" class="screenshot" rel="03/facebook.png"></a></li>
    <li><a href="#" class="screenshot" rel="03/about.png"></a></li>
    <li><a href="#" class="screenshot" rel="03/service.png"></a></li>
    <li><a href="#" class="screenshot" rel="03/service.png"></a></li>
    
      </ul> 
    
    

    L'immagine poi si puo spostare lungo gli assi, questo è il codice che ci permette di farlo

    /*
     * Url preview script 
     * powered by jQuery ([http://www.jquery.com](http://www.jquery.com/))
     * 
     * written by Alen Grakalic ([http://cssglobe.com](http://cssglobe.com/))
     * 
     * for more info visit [http://cssglobe.com/post/1695/easie...ew-using-jquery](http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery)
     *
     */
     
    this.screenshotPreview = function(){    
        /* CONFIG */
            
            xOffset = -20;
            yOffset = -650;
            
            // 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();
    });
    
    
    
     
    

    Il mio problema è che dovrei utilizzare il tooltip tre diverse volte con tre immagini di grandezza diversa e la distanza :

        xOffset = -20;
        yOffset = -650;
    

    non va bene per tutte e tre.
    Vorrei sapere se è quindi possibile cambiare la distanza delle immagini per i vari link a seconda dell'esigenza.