1

これは私の最初の投稿です。何か問題があった場合は、私の最も深い言い訳:)

HTML コントロールを少し書く必要がありますが、最大の問題は ie6-8 のサポートです。ie6-8 のサポートをスキップする代替手段はまったくありません :( しばらく検索した後、Raphael を見つけました。これにより、SVG ファイルで定義されたカスタム形状を作成できます。「マウスオーバー」イベントをアタッチし、ホバー時に要素を選択する必要があります。 . イベントはうまく機能していますが、VML ホバー動作に大きな問題があることがわかりました。

コードは、VML 形状の RAW html に簡素化されました。

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style>v\: * { behavior:url(#default#VML); antialias: false; }</style>
</head>
<body>
    <div id="message">hovered: nope</div>
    <v:oval id="oval" style="width:100px; height:75px" fillcolor="#bbb"></v:oval>

    <script>
        var messageElm = document.getElementById('message');
        var ovalElm = document.getElementById('oval');

        ovalElm.attachEvent('onmouseover', function () { messageElm.innerText = 'hovered: yep'; });
        ovalElm.attachEvent('onmouseout', function () { messageElm.innerText = 'hovered: nope'; });
    </script>
</body>
</html>

楕円形の要素の上にマウスを移動しようとすると、レンダリングされた形状がホバー形状と同じではないことに気付くでしょう。つまり、ホバーは、レンダリングされた形状から2〜3ピクセルをトリガーします（両側からではありません）。

問題は、その仮想領域を無効にする方法です (可能な場合)。

4

1 に答える 1

0

私は同じ問題を抱えていて、usemap; を試しました。

最初に、vml をカバーする透明な png8 でマップを作成します

    this.dom.insertAdjacentHTML("AfterBegin",'<map name="'+_id+'"></map><img id="'+_id+'" src="'+transparent.png+
        '" style="position:absolute;width:'+dom.clientWidth+';height:'+dom.clientHeight+'" />');
    var map = this.dom.getElementsByTagName('map')[0];
    this.dom.appendChild(map);
    this.map = map;

次に、形状を領域に取り付けます。それをマッピングします。ポリデモのみを作成しました。

function _getMap(shape){
    this._map = this._map || {};
    if(this._map[shape.id]){

    }else if(shape.nodeName == 'shape'){
        var arrDots = shape.childNodes[0].v.match(/(\d+),(\d+)/g)
        this._map[shape.id] = _polyMap(arrDots);    
    }
    return this.map[shape.id]

}
function _polyMap(arrDots){
    var map = this.map;
    var area = document.createElement('area');
    area.setAttribute('shape',"poly");
    area.setAttribute('coords',arrDots.join(','));
    area.setAttribute('href','##');
    area.setAttribute('alt','##');
    map.appendChild(area);
}

その後、それにイベントをバインドできます。

function  _onIE(shape, evtname, fn){
    this._getMap(shape).attachEvent('on'+evtname, fn);
}
于 2013-09-25T10:27:08.113 に答える