文章/答案/技术大牛

发布

问vml元素周围的虚拟区域
EN

Stack Overflow用户

提问于 2013-02-23 07:03:00

回答 1查看 257关注 0票数 1

这是我的第一篇文章，所以如果出了什么问题，我最深的借口是:)

我有一个小的html控件要写，最大的问题是ie6-8支持。没有其他方法可以跳过对ie6-8的支持:(所以在搜索了一段时间后，我确实找到了Raphael，它允许我创建在SVG文件中定义的自定义形状。我需要附加'mouseover‘事件并在悬停时选择元素。事件工作得很好，但我确实发现VML悬停行为存在很大问题。

代码被简化为具有VML形状的原始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-3px (而不是从每一边)。

所以问题是:如何禁用虚拟区域(如果可能的话)？

internet-explorer-8

internet-explorer-7

internet-explorer-6

raphael

vml

回答 1

Stack Overflow用户

发布于 2013-09-25 18:27:08

我也遇到了同样的问题，我试着使用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;

然后让形状附加到一个区域；映射它；我只制作了poly；

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);
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15034661

复制

相似问题

问vml元素周围的虚拟区域
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vml元素周围的虚拟区域EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vml元素周围的虚拟区域
EN