Question

我有以下图像映射代码：

<div class="fce75" data-close-text="Κλείσιμο" style="position:relative">
    <img alt=""  src="img/imagemap_3.png" usemap="#map-16682" > <map id="#map-16682" name="map-16682">
        <area coords="492,758,38" href="/roiplon/endeixeis/#c16384" shape="circle">
        <area coords="550,626,38" href="/roiplon/endeixeis/#c16442" shape="circle">
        <area coords="649,1050,38" href="/roiplon/endeixeis/#c16387" shape="circle">
        <area coords="816,691,38" href="/roiplon/endeixeis/#c16444" shape="circle">
        <area coords="1071,1257,38" href="/roiplon/endeixeis/#c16441" shape="circle">
        <area coords="1080,889,38" href="/roiplon/endeixeis/#c16436" shape="circle">
        <area coords="1218,380,38" href="/roiplon/endeixeis/#c16423" shape="circle">
        <a class="imageMapHighlight" style="display: none; position:absolute; top:0; left:0;"></a>
    </map>
</div>

我正在使用rwdImageMaps插件，我将其初始化为：

$('.fce75 > img[usemap]').rwdImageMaps();

然后我有以下悬停代码：

$('.fce75 area').hover(function(){

        var coords = $(this).attr("coords").split(',');
        var x = coords[0],
            y = coords[1],
            r = coords[2];

        $(this).closest('.fce75').find('.imageMapHighlight').css(
            {
                left: x - (r) + 'px',
                top: y - (r) + 'px',
                width: r*2 + 'px',
                height: r*2 + 'px',
                display: 'block',
            }
        ).attr('href', $(this).attr('href'));

    }, function(){

    })

我已经导入了jQuery以及rwdImageMaps（）;插件，但不知怎的，这仍然无法工作..为什么？ HERE是我试图将代码集成到的页面，但不知怎的，我无法使悬停代码正常工作。

Woudl感谢任何帮助。

图像映射悬停代码不起作用

0 个答案: