0

伙计们，我试图从本地 asp.net 页面上的小提琴运行代码，但它对我不起作用。请看看我哪里出错了。我无法在我的页面上获得悬停效果。

我不确定我是否包含了必要的 jquery 文件。

小提琴网址：http: //jsfiddle.net/VcGXL/

我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EPaperWeb.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>




    <script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $('#mapimage').mapster(
    {
        fillColor: 'ff0000'
    }); </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img id="mapimage" src="http://www.groupswelcome.co.uk/maps/uk_map.gif" usemap="#map"
            type="image/png" title="Join your local network"></div>
    <map id="map" name="map">
        <area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238"
            href="#" target="" />
        <area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293"
            href="#" target="" />
        <area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376"
            href="#" target="" />
        <area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366"
            href="#" target="" />
        <area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383"
            href="#" target="" />
        <area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327"
            href="#" target="" />
        <area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440"
            href="#" target="" />
        <area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436"
            href="#" target="" />
        <area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland"
            coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" />
    </map>
    </form>
</body>
</html>
4

3 回答 3

0

如果您看到左平移，则在jsfiddle上：

jsfiddle

代表ready()jquery 的事件，所以把你所有的代码放在：

$(document).ready(function() {
   //all code here
});
于 2013-08-28T06:24:33.833 回答
0

我没有看到你在哪里包含了 jquery mapster 插件。

你的脚本部分应该有这样的东西：

<script type ="text/javascript" src="~/path/to/scripts/jquery.imagemapster.js"></script>

您还应该等到 DOM 准备好：

$(document).ready(function() {
    $('#mapimage').mapster({
        fillColor: 'ff0000'
    });
});
于 2013-08-28T06:12:12.330 回答
0 
    <script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script src="jquery.imagemapster.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mapimage').mapster(
            {
                fillColor: 'ff0000'
            });
        });
 </script>
于 2013-08-28T05:56:46.940 回答