Question

我正在尝试制作图像地图，我需要在鼠标悬停时显示工具提示。 html代码如下所示。

`<div id="harta">
<img src="/templates/it_thecity/images/map.png" width="620" height="310" class="map"  border="0" usemap="#shqiperia" />
<map name="shqiperia" id="shqiperia">
<area shape="poly" coords="266,69,260,74,260,82,255,90,251,97,246,98,246,104,240,103,239,107,240,113,237,116,239,121,243,121,248,123,251,120,252,114,256,115,260,117,263,114,263,109,263,105,265,104,268,104,269,100,271,96,272,91,270,89,267,81,267,75,266,69" href="#" target="_self" alt="Shkodra" title="Shkodër (3)" class="sh masterTooltip" data-maphilight='{"groupBy":".sh"}'/>
<area shape="rect" coords="44,56,122,76" href="#" alt="Shkodër" class="sh masterTooltip" data-maphilight='{"groupBy":".sh","fill":false, "stroke":false}' title="3 Universitete" />
</div>`

我的网站上的模块中有一个javascript代码，其中显示了一些不在图像映射中的其他元素的工具提示。

`<script type="text/javascript">
    window.addEvent('domready', function() {
        $$('.hasTip').each(function(el) {
            var title = el.get('title');
            if (title) {
                var parts = title.split('::', 2);
                el.store('tip:title', parts[0]);
                el.store('tip:text', parts[1]);
            }
        });
        var JTooltips = new Tips($$('.hasTip'), { fixed: false});
    });

    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>`

如何在鼠标悬停在area元素上时显示工具提示？

Answer 1

前一段时间解决了这个问题，但忘了给答案。这是解决方案：

[http://jsfiddle.net/ove4trwa/4/][1]

标题上的图像映射区域工具提示

1 个答案: