文章/答案/技术大牛

发布

社区首页 >问答首页 >ImageMapster不工作

问ImageMapster不工作
EN

Stack Overflow用户

提问于 2015-05-21 20:40:58

回答 2查看 2.8K关注 0票数 0

最近我做了一个网页，其中包括使用图像映射。现在的主要目标是用鼠标突出显示图像的区域，所以我决定使用ImageMapster，但出于某种原因，它根本不起作用。

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>
        <meta charset="utf-8"/>
        <title>jeKnowledge's Interative Website</title>
        <link href="main.css" rel="stylesheet">

        <!-- IMAGE MAPSTER-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script src="jquery.imagemapster" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>


</head>

<body>
<div>

        <map name="webjek">
            <area href = "#" shape="poly" coords="0, 474, 12, 464, 31, 462, 46, 465, 64, 477, 74, 499, 81, 518, 72, 533, 71, 544, 73, 552, 91, 551, 103, 556, 116, 560, 131, 580, 144, 603, 152, 624, 162, 644, 158, 652, 162, 650, 174, 667, 245, 667, 246, 615, 253, 603, 264, 592, 275, 589, 286, 550, 318, 526, 349, 508, 344, 500, 343, 492, 347, 483, 351, 478, 357, 448, 375, 428, 403, 430, 421, 437, 431, 455, 429, 480, 424, 498, 421, 515, 443, 514, 469, 533, 481, 559, 497, 591, 493, 592, 508, 614, 520, 644, 540, 641, 530, 665, 538, 667, 0, 666" alt="inovacao" title="Departamento de Inovação"/>
            <area href="#" shape="poly" class="{fillColor:'00ff00'}"coords="1064, 668, 1110, 481, 1348, 550, 1346, 667" alt="sjmeeting" title="Summer Jade Meeting" />
            <area href="#" shape="poly" coords="868, 456, 942, 191, 1128, 212, 1040, 517, 865, 464" alt="rec" title="Recrutamento" />
            <area href="#" shape="poly" coords="458, 105, 458, 155, 491, 154, 491, 166, 518, 168, 519, 118, 490, 119, 489, 105" alt="shifth" title="ShiftHappens" />

        </map>

    </div>


    <div id="background"><img class="mapper" id="myimage" src="C:\Users\Pedro\Desktop\projeto jeKnowledge\image.jpg" alt="" usemap="#webjek"></div>


</body>

</html>

jQuery：

var main = function(){

    $('img').mapster('highlight')
        $('img').mapster('highlight',"key")
        $('img').mapster('highlight',false) 
        $('area').mapster('highlight');




}  

$(document).ready(main);

还有CSS代码，但我认为这与此无关。谢谢!

jquery

html

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-05-21 20:49:03

这是因为你没有以正确的方式启动它。下面是我如何在一个项目中使用它在鼠标悬停时用白色进行“高亮显示”：

    $('#example').mapster({
            singleSelect: true,
            fill : true,
            fillOpacity : 0.6,
            fillColor: 'ffffff',
            onMouseover: function(e) {
                $(this).mapster('set',false).mapster('set',true);
            },
            onMouseout: function(e) { 
                 $(this).mapster('set',false);
            }
        });

启动时，必须以这种方式调用所有参数，而不是一个接一个地调用。

我认为您应该考虑阅读文档并查看示例一个小时，也许在开始使用它之前。一开始看起来可能很复杂，但最终还是很艰难的。您将在这里看到如何调用参数、它们是做什么的以及如何正确地使用mapster。

http://www.outsharked.com/imagemapster/default.aspx?docs.html

票数 1

Stack Overflow用户

发布于 2015-05-21 20:56:07

在<head>中

<script src="jquery.imagemapster" type="text/javascript"></script>

正确设置文件路径。

票数 3

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

原文链接：

https://stackoverflow.com/questions/30383932

复制

相似问题

问ImageMapster不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ImageMapster不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ImageMapster不工作
EN