1

コードに問題があります。私は JavaScript についてほとんど何も知らないので、どんな助けでも大歓迎です。

このフェード スライダーのバナーと写真 (写真は 3 つだけですが、それぞれに異なるリンク) を Web サイトのページにリンクさせたいと考えています。これを行う方法がわかりません。

ここにウェブサイトへのリンクがありますので、私がやろうとしていることを見ることができます : http://www.buildings4babies.org

これが私の現在のスクリプトです。

(function($) {
    $.fn.aToolTip = function(options) {

        // setup default settings
        var defaults = {
            clickIt: true,
            closeTipBtn: 'aToolTipCloseBtn',
            fixed: false,
            inSpeed: 200,
            outSpeed: 0,
            tipContent: '',
            toolTipClass: 'aToolTip',
            xOffset: 5,
            yOffset: 5
        },

        // This makes it so the users custom options overrides the default ones
        settings = $.extend({}, defaults, options);

        return this.each(function() {
            var obj = $(this);
            // Decide weather to use a title attr as the tooltip content
            if(obj.attr('title')){
                // set the tooltip content/text to be the obj title attribute
                var tipContent = obj.attr('title');  
            } else {
                // if no title attribute set it to the tipContent option in settings
                var tipContent = settings.tipContent;
            }

            // check if obj has a title attribute and if click feature is off
            if(tipContent && !settings.clickIt){    
                // Activate on hover    
                obj.hover(function(el){
                    obj.attr({title: ''});                        
                    $('body').append("<div class='"+ settings.toolTipClass +"'><p class='aToolTipContent'>"+ tipContent +"</p></div>");
                    $('.' + settings.toolTipClass).css({
                        position: 'absolute',
                        display: 'none',
                        zIndex: '50000',
                        top: (obj.offset().top - $('.' + settings.toolTipClass).outerHeight() - settings.yOffset) + 'px',
                        left: (obj.offset().left + 1/2*(obj.outerWidth()) + settings.xOffset) + 'px'
                    })
                    .stop().fadeIn(settings.inSpeed);   
                },
                function(){ 
                    // Fade out
                    $('.' + settings.toolTipClass).stop().fadeOut(settings.outSpeed, function(){$(this).remove();});
                }); 
            }

            // Follow mouse if fixed is false and click is false
            if(!settings.fixed && !settings.clickIt){
                obj.mousemove(function(el){
                    $('.' + settings.toolTipClass).css({
                        top: (el.pageY - $('.' + settings.toolTipClass).outerHeight() - settings.yOffset),
                        left: (el.pageX + settings.xOffset)
                    })
                });         
            }           

            // check if click feature is enabled
            if(tipContent && settings.clickIt){
                // Activate on click    
                obj.click(function(el){
                    obj.attr({title: ''});                        
                    $('body').append("<div class='"+ settings.toolTipClass +"'><p class='aToolTipContent'>"+ tipContent +"</p></div>");
                    $('.' + settings.toolTipClass).append("<a class='"+ settings.closeTipBtn +"' href='#' alt='close'>close</a>");
                    $('.' + settings.toolTipClass).css({
                        position: 'absolute',
                        display: 'none',
                        zIndex: '50000',
                        top: (obj.offset().top - $('.' + settings.toolTipClass).outerHeight() - settings.yOffset) + 'px',
                        left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
                    })
                    .fadeIn(settings.inSpeed);  
                    // Click to close tooltip
                    $('.' + settings.closeTipBtn).click(function(){
                        $('.' + settings.toolTipClass).fadeOut(settings.outSpeed, function(){$(this).remove();});
                        return false;
                    });      
                    return false;           
                });
            }

        }); // END: return this

        // returns the jQuery object to allow for chainability.  
        return this;
    };
})(jQuery);
4

1 に答える 1

0

jQuery メソッドを既に使用しているため、jQuery メソッドについて説明します。

リンク要素として使用する画像の要素 ID を見つける必要があります。html では、次のようになります"id="asdfasdf"。

残念ながら、スクリプトの中で画像が挿入されている箇所が見つかりませんでした。正直なところ、この機能はツールチップのみを表示するようです。

とにかく、要素の id を見つけたら、jQuery の を使用して選択できます$('#idofyourelement')。ID がない場合は、別の方法で選択できます。紹介はこちらをご覧ください。

要素を選択したら、wrap()メソッドを使用してその周りに html リンクを追加するか、クリック リスナをインストールして、新しいリンクを開く関数を呼び出すことができます。

function goToLink() {
      window.location = "http://www.whereveryouwant.com"
    }

$("#idofyourpicture").click(goToLink);

リンクとして使用するすべての画像に対してこれを行います。

于 2012-10-19T01:36:14.257 に答える