1

私はウェブサイトhttp://zielonyzoliborz.pl/をRaphaelでsvgを使用して作成しました.建物のツールチップのマウスオーバーが画面（FF、Chrome、Safari）に表示されますが、IE9とOperaでは表示されません.動作するが上記のブラウザではない IE8

たとえば、Raphael.js を使用して簡単なタイトルを設定しています。

paper.path("M1345.5,413.5l0.125-31.125L1256.5,371l-18,22.5l1,22L1038,389.333l-3,3.333l-62,53V454 l-13,11.333v34.333l-42.333-7l-85.333,77v8.667l-14,12v95L821,689v5.25l3.25,2.75v9h5.5l1.25-5.25V697l3-2l2.75-3.875l2-2.625v-4.75 l3-3l3.5-2.75l6.5,0.25l1.75,1.25l2.5,1.75l2.75,4.75v4v2.25V694l2.5,2.25V701v5.75v3.75v2.5l3,1.25H867v-4.75V703v-4.25v-6.25 l2.75-2l1.25-6l3.25-2.5l2.25-5.75h4h3.75l2.5,4.75l1.75,3l1.25,3v5.75l2.5-2.75l3.25-0.25l4-3.25l2.25-1h3.5l3.25,0.75l1.5-4.5 c0,0,3.75-1.5,4.5-0.5s3,1.75,3,2.5s0.75,3,1.75,3.25s4.5,2.5,4.5,2.5s-0.25,3.75,0,4.5s1.25,4.25,1.25,4.25l2,2.5 c0,0,5,0.75,5.75,1s3-1.25,3-1.25l1.5-3.5l3-1.75l2-2.75H945l3.25,0.25h4.25l2.75-1l2.5,1.5c0,0,1.5,3.25,2.25,4s4,4.5,4,4.5 l2.25,4.5l1.75,1.25l4.75-0.5l2.25-4.75v-3.5l3-1.5l3.75,0.25c0,0,3.25,2.25,3.25,3.25s3.5,4.5,3.5,4.5l1.5,4.5l1.5,5.75l2,5v5.25 l3,2h3.25l3.75-2.5h3.75l2.5-1.5l2.5-2.75h3.75l4.75,2.75v3v4L1024,734v5.25v3.25v2l4.25-4.75c0,0,3-1.25,4-1.25s5.25-1,5.25-1 l-2-4.75l2-2.25l2-1.75l-5.75-2.5l-0.25-4l3-1.25l1.25-4.75l3-2.25l4.25-2.5l3.5-1.125l5,1.125l4,3l4.25,3l2.25,4l2.5,2v5.5l4,3.75 l2,2.75l1.75-0.25l2.75-2l1.25-4.75l3.25-4.25l2.5-3.25l2.729-2.25l2.021-2.25h3.75l3.5,1.5l3,3.5v5l2.5,1.25l1.75-3.25l4.25-1.5 h3.5l4.5,3.25l2.75,4.75l1.5,3.75l3.75,0.75l3,3.25l5.75,5.75l1.75,2.25l1.25,3.5v5.25l2.5,2.25l2.25,2.75h8.25h4.25l3.75,1.75 l3,2.5V767l3.25,4.75l2-4.5l3.75-3l2.5-8.5v-4.25c0,0,3.25-2.25,3.25-3s3.5-3.75,3.5-3.75l3.75-1.75l2-3.25V736l5.25-1.5l5-4.75h3.5 l3.25,1l2.75,2.5l3,2.5l1.25,6l1.5,3.5V749c0,0,2,2.5,1.75,3.25s-1,5.5-1,5.5l1.021,6c0,0,0.838,1.598,1.66,2.892l142.326-236.143 l0.617-116.749L1345.5,413.5z M1116,536h-4.667l0.042,6.375l-13.375,14.5v22.375l-68-10.917l35-41.667l26.667,5l5.666-2.667 l3.709-1.854l4.958-0.083l5.125,0.688l3.542,2.583l3,2.667L1116,536z").attr({
"fill":"#FBA919",
"stroke-width":0,
"fill-opacity":0,
"stroke":"transparent",
"cursor":"pointer",
"title":"Budynek B"
}).mouseover(
function(){
this.animate({
"fill-opacity":.4
},300);
}).mouseout(function(){
this.animate({
"fill-opacity":0
},300);
});

グラフィックタイトルを表示するためのeasytooltip.js（FF。Chrome、Opera）

$('svg a:nth-child(21)').easyTooltip({
tooltipId:"budynek-b",
yOffset:90,
xOffset:-44,
});

#budynek-b{
background:url(../img/zz_budynekB_smal.png) no-repeat center center;    
width:60px;    
height:86px;    
overflow:hidden;    
text-indent:-9999px;    
z-index:1000000
}
4

1 に答える 1

0

コードに JavaScript エラーがあります (これは Opera Dragonfly デバッグ ツールからコピーされたものです)。

Uncaught exception: TypeError: Cannot convert 'b' to objectError thrown at line 1210, column 3 in <anonymous function: _getDisplayTextForRecordField>(b, a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    var c = this.options.fields[a],
called from line 1155, column 3 in <anonymous function: _createCellForRecordField>(b, a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    return c('<td class="' + this.options.fields[a].listClass + '"></td>').append(this._getDisplayTextForRecordField(b, a) || "")
called via Function.prototype.apply() from line 2476, column 3 in <anonymous function: _createCellForRecordField>(a, b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    var c = d.apply(this, arguments);
called from line 1152, column 4 in <anonymous function: _addCellsToRowUsingRecord>(b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    this._createCellForRecordField(b.data("record"), this._columnList[a]).appendTo(b)
called via Function.prototype.apply() from line 1757, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments);
called via Function.prototype.apply() from line 1990, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments);
called via Function.prototype.apply() from line 2120, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments)
called from line 1147, column 3 in <anonymous function: _createRowFromRecord>(b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    this._addCellsToRowUsingRecord(b);
called from line 1160, column 4 in <anonymous function: _addRecordsToTable>(b, d) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    a._addRowToTable(a._createRowFromRecord(d))
called via Function.prototype.call() from line 608, column 7 in <anonymous function: each>(a, c, d) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/jquery-1.7.2.min.js:
    if (c.call(a[g], g, a[g++]) === !1)

私の推測では、不足しているツールチップはそのエラーに関連していると思います。

更新:わかりました、それが修正された後、もう一度見てみました。問題は、要素のtitle属性の名前空間です。<svg:a>属性にアクセスするために名前空間を認識するメソッドが使用されている場合に機能します。

ハック/回避策は次のとおりです。

var title = $(this).attr("title") || this.getAttributeNS("http://www.w3.org/1999/xlink", "title");

plugin.jsこれをスクリプトに配置します(これは変更されたコードを示しています)。

$.fn.easyTooltip = function(options){

    // default configuration properties
    var defaults = {    
        xOffset: 10,        
        yOffset: 25,
        tooltipId: "easyTooltip",
        clickRemove: false,
        content: "",
        useElement: ""
    }; 

    var options = $.extend(defaults, options);  
    var content;

    this.each(function() {                  
        var title = $(this).attr("title") || this.getAttributeNS("http://www.w3.org/1999/xlink", "title");
        $(this).hover(function(e){                                                                         
            content = (options.content != "") ? options.content : title;
            content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
            $(this).attr("title","");                                                   
            if (content != "" && content != undefined){         
                $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");      
                $("#" + options.tooltipId)
                    .css("position","absolute")
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                     
                    .css("display","none")
                    .fadeIn("fast")
            }
        },

ここでの変更はgetAttributeNS、jQuery.attrメソッドが失敗した場合にフォールバックすることです (ブラウザーの違いを隠すためですよね? ;)。これで、少なくとも Opera では動作します。本当のより良い修正は、属性を設定する場所がそれらをnull名前空間に設定することを確認することelm.setAttributeNS(null, "title", "some-value")です.

于 2012-12-05T11:59:39.827 に答える