Question

我有一张我已映射的图像以及我现在要做的事情，就是当用户在选定的映射位置上盘旋时，我希望该部分改变它的颜色。这是我的代码：

<!DOCTYPE HTML>
<html>
<body>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.imagemapster.js"></script>

</head>

<link rel="stylesheet" type="text/css" href="css.css" />

<script>
    $('#mapmap').mapster({
        singleSelect: true,
        mapKey: 'color',
    fill: true,
    fillColor: "#FF0000",
    fillOpacity: 1,
});
</script>

<img src="img/bgmap.png" width="550" height="420" alt="RegMap" id="mapmap"  usemap="#regmap">

<map name="regmap" id="mapmap">
 <area shape="poly" color="blue" coords="53,394,72,396,80,387,92,387,110,387,132,388,143,378,152,385,155,373,161,359,152,352,137,334,132,330,130,314,132,307,128,296,126,292,140,284,146,277,149,270,162,260,148,254,144,246,144,237,162,236,174,234,161,240,167,235,173,225,180,219,179,214,172,211,172,202,168,190,163,181,154,180,143,180,137,177,125,181,116,184,111,174,111,162,96,166,86,171,77,169,67,158,59,172,51,183,43,193,34,196,23,199,12,204,16,219,12,226,18,236,21,244,18,254,11,263,1,269,9,281,32,300,43,304,48,326,60,338,60,354,54,359,55,371,51,387,56,393" href="southwest.html"  alt="Southwest">
  <area shape="poly" coords="235,223,224,241,232,254,242,269,235,273,241,283,234,290,242,293,250,297,255,312,249,337,275,348,288,366,322,405,337,389,321,365,328,353,346,356,352,345,369,337,384,322,404,320,417,311,436,304,456,317,468,329,483,323,498,319,512,320,492,300,487,283,479,271,457,260,459,251,470,245,476,233,494,227,497,212,471,207,449,202,437,199,416,204,400,202,386,211,375,203,370,196,349,190,335,203,324,215,312,220,294,224,276,224,258,224,243,223,226,226" href="southeast.html" alt="Southeast">

  <area shape="poly" coords="116,296,118,318,120,337,137,350,146,361,146,371,161,371,178,374,190,373,196,390,213,392,237,400,255,413,276,415,295,410,310,409,320,406,311,386,297,373,288,365,287,352,266,343,252,338,251,329,258,323,261,306,245,301,236,292,242,280,243,274,243,265,249,259,232,249,232,238,232,229,217,225,204,222,192,218,178,226,181,238,184,249,173,248,167,241,159,239,156,244,151,247,138,244,132,242,139,255,139,266,135,277,132,288" href="southmiddle.html" alt="Southmiddle">




  <area shape="poly" coords="66,43,54,38,37,26,35,39,28,46,25,52,12,50,10,64,11,80,16,89,18,99,25,116,33,122,40,125,46,134,55,146,64,155,74,162,88,162,101,157,111,172,115,183,129,174,145,180,157,176,169,184,172,202,176,209,192,213,205,211,222,216,237,221,248,218,240,203,237,190,244,181,244,170,247,160,259,165,263,151,274,145,270,138,263,131,271,126,274,114,272,107,263,104,251,98,238,99,232,102,220,96,206,89,195,96,186,100,167,97,149,91,138,85,129,83,123,84,112,79,98,76,87,74,85,77,72,81,62,80,55,72,52,59,57,51,64,45" href="northwest.html" alt="Northwest">



  <area shape="poly" coords="274,108,292,105,303,98,315,89,327,72,334,65,346,61,351,68,362,69,379,64,382,72,395,71,414,83,420,85,416,92,410,98,407,99,404,104,390,112,392,121,385,131,391,146,387,153,384,162,384,174,372,180,373,175,370,184,366,187,357,196,349,204,346,212,331,218,318,216,309,217,298,219,289,213,282,218,269,215,257,216,249,217,239,201,238,193,242,187,247,183,246,173,248,167,255,170,264,164,266,156,268,150,275,147,270,138,264,133,271,128,275,114" href="northmiddle.html" alt="Northmiddle">


  <area shape="poly" coords="356,57,365,61,374,63,394,69,407,70,413,82,409,100,403,109,396,116,389,130,390,142,389,150,390,160,386,167,381,181,373,188,372,193,380,194,390,193,396,190,406,189,413,196,423,191,434,190,446,192,453,198,463,200,469,198,480,203,490,207,494,197,497,185,496,172,496,162,501,152,504,147,505,138,514,133,526,131,540,129,547,136,553,126,559,114,558,109,557,103,555,99,555,93,543,92,534,88,520,85,507,81,502,73,498,58,491,62,482,65,475,64,472,55,466,55,453,58,443,55,439,48,430,43,417,41,409,41,402,43,396,46,389,51,377,54,365,54" href="northmiddle.html" alt="Northmiddle">

</map>

</body>
</html>

那么我做错了什么，因为这没有做任何事情？感谢

Answer 1

在准备就绪之前，您无法访问元素......

<script>
$( document ).ready(function() 
{
    $('#mapmap').mapster(
    {
        singleSelect: true,
        mapKey: 'color',
        fill: true,
        fillColor: "#FF0000",
        fillOpacity: 1,
    });
});
</script>

使用jQuery进行图像映射，如何在悬停时更改颜色？

1 个答案: