Question

我在magento中使用ultimo主题。因为我使用了从http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html下载的以下脚本来使图像映射响应。

HTML：

<img name="sale" src="sale_1.jpg" width="1180" height="200" id="sale" usemap="#m_sale" alt="" /><map name="m_sale" id="m_sale">
<area shape="rect" coords="951,25,1169,182" href="#" target="_self" alt="" />
<area shape="rect" coords="732,26,944,182" href="#" target="_self" alt="" />
<area shape="rect" coords="506,24,726,182" href="#" title="/Clocks_s/635.htm" alt="/Clocks_s/635.htm" />
<area shape="rect" coords="287,24,501,182" href="#" target="_self" alt="" />
</map>

脚本：

;(function($) {
    $.fn.rwdImageMaps = function() {
        var $img = this,
            version = parseFloat($.fn.jquery);

        var rwdImageMap = function() {
            $img.each(function() {
                if (typeof($(this).attr('usemap')) == 'undefined')
                    return;

                var that = this,
                    $that = $(that);

                // Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
                $('<img />').load(function() {
                    var w,
                        h,
                        attrW = 'width',
                        attrH = 'height';

                    // jQuery < 1.6 incorrectly uses the actual image width/height instead of the attribute's width/height
                    if (version < 1.6)
                        w = that.getAttribute(attrW),
                        h = that.getAttribute(attrH);
                    else
                        w = $that.attr(attrW),
                        h = $that.attr(attrH);

                    if (!w || !h) {
                        var temp = new Image();
                        temp.src = $that.attr('src');
                        if (!w)
                            w = temp.width;
                        if (!h)
                            h = temp.height;
                    }

                    var wPercent = $that.width()/100,
                        hPercent = $that.height()/100,
                        map = $that.attr('usemap').replace('#', ''),
                        c = 'coords';

                    $('map[name="' + map + '"]').find('area').each(function() {
                        var $this = $(this);
                        if (!$this.data(c))
                            $this.data(c, $this.attr(c));

                        var coords = $this.data(c).split(','),
                            coordsPercent = new Array(coords.length);

                        for (var i = 0; i < coordsPercent.length; ++i) {
                            if (i % 2 === 0)
                                coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
                            else
                                coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
                        }
                        $this.attr(c, coordsPercent.toString());
                    });
                }).attr('src', $that.attr('src'));
            });
        };
        $(window).resize(rwdImageMap).trigger('resize');

        return this;
    };
})(jQuery);

$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});

问题是jquery-noconflict.js和用于搜索自动完成小部件的javascripts与上面的脚本冲突。如果我删除它们图像映射调整大小脚本工作正常。如何解决这个冲突？

Answer 1

试试这个：

(function($){
  /* inside wrapper can use "$" */
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });

})(jQuery);

或者可以将$更改为jQuery

    jQuery(document).ready(function(e) {
       jQuery('img[usemap]').rwdImageMaps();
    });

这两种方法都记录在jQuery API noConflict() docs

中

如有疑问......请查看API

响应式图像区域地图不在magento中工作

1 个答案: