对所有初学者使用maphilight吗? [英] Using maphilight for total beginners?

问题描述

我正在尝试使用一个名为maphilight的jquery插件. 我对使用jquery插件是完全陌生的.我在其他网页设计编码方面有相当的经验，甚至在javascript方面也有一些经验，但是实际上我试图像这样……第一次使用它.

I'm trying to use a jquery plugin called maphilight. I'm totally new to using jquery plugins. I've a fair bit of experience with other web designing coding and even a little with javascript but actually trying to practically use it like this...its a first.

我只是无法使该插件正常工作. 在我的地图上，不同的区域可以正确单击并用作链接，但是它们不会成为亮点.我最好的办法是在页面的不同部分显示不正确的突出显示.

I just can't get this plugin to work. On my map the different areas are correctly clickable and serve as links however they won't become hilighted. The best I can do is an inccorect highlight shows up in a differnt part of the page.

我已经查看了maphighlight网站，并看到了他的示例，但是我看不到如何使用代码示例的可靠信息.

I've looked at the maphighlight site and saw his examples but I cant see a solid how to use the code example.

我在页面顶部附近:

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/maphilight.js"></script>
<script type="text/javascript">
    $(function () {
        $('.mapHiLight').maphilight({ stroke: false, fillColor: '009DDF', fillOpacity: 1 });
    });
</script>

然后查看地图

<img src="image/japan.svg" width="570" height="750" usemap="#nihon">
    <map name="nihon">
    <area id="test3" href="http://www.tokyo.com" shape="poly" coords="407.963,498.081 403.323,498.08 407.963,498.081 400.819,498.908 387.434,499.66 388.25,496.5 
                381.4,492.742 381.742,489.948 381.742,489.948 382.811,488.967 385.754,488.459 395.005,491.437 412.248,488.907 412.049,492.742" alt="tests" title="testerhi">
    </map>

这里可能出什么问题了?我该怎么办?

what could be going wrong here? What should I do?

很抱歉，您在这里这么笨.我希望我缺少一些简单的东西.

Sorry for being so clueless here. I hope I'm missing something simple.

推荐答案

您应该为图像指定类mapHiLight.
这是maphilight的示例演示.

You should have given class mapHiLight to your image.
Here is a sample demo for maphilight.

此处提供示例演示: 小提琴

Sample Demo Here : Fiddle

这篇关于对所有初学者使用maphilight吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！