asp.net 怎样用ImageMap定位多个矩形的热点？？

Question

asp.net 怎样用ImageMap这个控件中图片上定位多个矩形的热点？？第一次用这个控件。不会用。。或者有什么别这个更好的控件来定义热点。?
请赐教、、

Answer 1

dreamview有个热点工具很好用的

Answer 2

哈哈，分数给我吧。这个曾经是我苦苦寻找，试验了N次才搞定的功能~！技巧：首先用Dreamweaver做出一个热点导航条，然后把热点那块的代码拷贝过去，注意这还不能直接用，要修改一下背景图片的路径（.net中的背景图片路径和html中的途径稍稍有点不同，你可以通过对比两个环境下生成的代码就知道了。）
自己可以试验一下，通过动手，自己作出来了，以后都能记住了@~@一下代码是我曾经做过的一个asp.net网站中的代码:---------------------------------------------------------------
<td colspan="2" style="height: 2px; background-color: #330033; width: 940px;">
                   <img name="n89038" src="../复件%20带文字的页图标条890-38.gif" width="890" height="36" border="0" id="IMG1" usemap="#m_复件20带文字的页图标条89038" alt="" runat="server" /><map name="m_复件20带文字的页图标条89038" id="m_复件20带文字的页图标条89038">
<area shape="rect" coords="814,0,890,36" href="http://******.com"  alt="" />
<area shape="rect" coords="749,0,815,36" href="OA.aspx"  alt="" />
<area shape="rect" coords="637,0,748,36" href="relation.aspx"  alt="" />
<area shape="rect" coords="534,0,638,36" href="invite.aspx"  alt="" />
<area shape="rect" coords="416,0,532,36" href="achievement.aspx"  alt="" /><area shape="rect" coords="308,0,416,36" href="solve.aspx"  alt="" />
<area shape="rect" coords="186,0,306,36" href="perduction.aspx"  alt="" />
<area shape="rect" coords="87,0,187,36" href="introduction.aspx"  alt="" />
<area shape="rect" coords="0,0,84,36" href="Default.aspx"  alt="" />
</map>
                    <hr style="height: 1px; width: 890px;" />
                   </td>

Answer 3

这个我自己解决了，跟你一样的，但是有个问题，怎么点击热点去执行服务端代码呢？在onclick事件中。

Answer 4

ONCLICK 里面触发另一个可提交控件的CLICK
或者使用AJAX

Answer 5

DEMO:
http://www.dgsp.cn/News/News.aspxCode:<table width="858" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td width="78">
            <asp:ImageMap ID="ImageMap1" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/image2/H-1.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/Index.aspx" />
            </asp:ImageMap>
        </td>
        <td width="76">
            <asp:ImageMap ID="ImageMap2" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-2.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/AboutUs/AboutUs.aspx" />
            </asp:ImageMap>
        </td>
        <td width="78">
            <asp:ImageMap ID="ImageMap3" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-3.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/News/News.aspx" />
            </asp:ImageMap>
        </td>
        <td width="77">
            <asp:ImageMap ID="ImageMap4" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-4.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/Product/sample.aspx" />
            </asp:ImageMap>
        </td>
        <td width="78">
            <asp:ImageMap ID="ImageMap5" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-5.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/Quotation/Quote.aspx" />
            </asp:ImageMap>
        </td>
        <td width="78">
            <asp:ImageMap ID="ImageMap6" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-6.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/Trade/TradeInfo.aspx" />
            </asp:ImageMap>
        </td>
        <td width="78">
            <asp:ImageMap ID="ImageMap7" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-7.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/Enterprise/Enterprise.aspx" />
            </asp:ImageMap>
        </td>
        <td width="80">
            <asp:ImageMap ID="ImageMap8" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-8.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/SignIn.aspx" />
            </asp:ImageMap>
        </td>
        <td width="78">
            <asp:ImageMap ID="ImageMap9" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-9.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/Machine/Machine.aspx" />
            </asp:ImageMap>
        </td>
        <td width="78">
            <asp:ImageMap ID="ImageMap10" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-10.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/HumanResource/Hr.aspx" />
            </asp:ImageMap>
        </td>
        <td width="79">
            <asp:ImageMap ID="ImageMap11" runat="server" BorderWidth="0" ImageAlign="AbsBottom"
                ImageUrl="~/Image2/H-11.jpg" HotSpotMode="Navigate">
                <asp:RectangleHotSpot Bottom="35" Right="75" Left="4" Top="6" NavigateUrl="~/GuestBook/GuestBook.aspx" />
            </asp:ImageMap>
        </td>
    </tr>
</table>

Answer 6

可以参考一下JavaScript中是如何处理鼠标经过事件的做法，有点另类。