Image相关的有三个控件，一个是image 二个是 ImageButton
三个是!!铛铛铛，新控件--ImageMap ,依我的说法，其实这控件压根就一鸡肋，没意思，说它是鸡肋也不是没道理，可以用在图片上特定的区域响应事件，其次是可以导航，我不知道微软的人见过Dreamweaver没有，我想没有，否则的话他们的这个控件不会做得这么难用，你看Dreamweaver的热点多好用，呵呵，闲话少说，开工！！！
文章后面是转载的： ImageMap控件是一个让你可以在图片上定义热点（HotSpot）区域的服务器控件。用户可以通过点击这些热点区域进行回发（PostBack）操作或者定向（Navigate）到某个URL位址。该控件一般用在需要对某张图片的局部范围进行互动操作时，其主要属性有HotSpotMode、HotSpots和主要操作Click。
完整源文件下载地址 https://files.cnblogs.com/thcjp/image.rar
Image相关的有三个控件，一个是image 二个是 ImageButton
三个是!!铛铛铛，新控件--ImageMap ,依我的说法，其实这控件压根就一鸡肋，没意思，说它是鸡肋也不是没道理，可以用在图片上特定的区域响应事件，其次是可以导航，我不知道微软的人见过Dreamweaver没有，我想没有，否则的话他们的这个控件不会做得这么难用，你看Dreamweaver的热点多好用，呵呵，闲话少说，开工！！！
Default.aspx前台HTML代码<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></head><body> <form id="form1" runat="server"> <div> Image相关的有三个控件，一个是image 二个是 ImageButton <br /> 三个是!!铛铛铛，新控件--ImageMap ,依我的说法，其实这控件压根就一鸡肋，没意思，说它是鸡肋也不是没道理，可以用在图片上特定的区域响应事件，其次是可以导航，我不知道微软的人见过Dreamweaver没有，我想没有，否则的话他们的这个控件不会做得这么难用，你看Dreamweaver的热点多好用，呵呵，闲话少说，开工！！！<br /> <br /> 演示一 Image <br /> <br /> 直接贴的图片，没什么好说的，就一个属性，ImageUrl<br /> <a href="delt.aspx?id=1"><asp:Image ID="Image1" runat="server" AlternateText="洪川医院评价" ImageUrl="~/img/1.gif" /></a><br /> <br /> 演示二 下拉列表控制图片<br /> <br /> <asp:Image ID="Image2" runat="server" AlternateText="显示图片请在下面选择" /><br /> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> </asp:DropDownList><br /> <br /> ImageButton演示一<br /> 鼠标触发图片样式，以及鼠标点击事件,如果看过我前面《<a id="_dd4fcfa3b08_HomePageDays_DaysList_ctl02_DayItem_DayList_ctl04_TitleUrl" href="http://thcjp.cnblogs.com/archive/2006/05/28/410994.html">vs2005/.net2.0 控件实例之 按纽《Button》</a>》朋友就会知道，我这里同样用了一个CommandName ，使三个图片按纽响应同一个事件，却能够判断是那个图片在捣乱！<br /> <br /> <asp:ImageButton ID="ImageButton1" runat="server" CommandName="a" ImageUrl="~/img/3.gif" BorderWidth="0.2cm" BorderColor="Gainsboro" OnClick="ImageButton1_Click" onmouseover="this.style.border='0.2cm solid black';" onmouseout="this.style.border='0.2cm solid gainsboro';" /> <asp:Label ID="Label1" runat="server"></asp:Label><br /> <br /> <asp:ImageButton ID="ImageButton2" runat="server" CommandName="b" ImageUrl="~/img/2.gif" OnClick="ImageButton1_Click" /> <asp:Label ID="Label2" runat="server"></asp:Label><br /> <br /> <asp:ImageButton ID="ImageButton3" runat="server" CommandName="c" ImageUrl="~/img/3.gif" OnClick="ImageButton1_Click" onmouseover="this.src='img/4.gif';" onmouseout="this.src='img/3.gif';" /> <asp:Label ID="Label3" runat="server"></asp:Label><br /> <br /> <br /> 演示二 ： 告诉你，你点了图片上的什么位置（以XY的方式），还是有点用吧！下面这个如果感觉不好理解的话咨询QQ110535808 ，我很乐意帮忙的！当然也可以到thcjp.cnblogs.com查看相关的东西<br /> <br /> <br /> <br /> <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/img/4.gif" OnClick="ImageButton4_Click" /> <asp:Label ID="Label4" runat="server"></asp:Label> <br /> <br /> <asp:Label ID="Label5" runat="server"></asp:Label><br /> <br /> ImageMap 演示之 Navigate URL ，如果撇开这个URL可以在服务器中更换这个优点，他就没用了，呵呵，因为DW的热点肯定比他这个直观多了！（注意哦，这两图片虽然是一样的，但是上面那个是ImageButton,而下面这个是ImageMap）<br /> <br /> 三个热点方式<br /> <br /> <br /> CircleHotSpot ： 圆形热点（这个我明白了）<br /> 有三个参数，一个是直径，另外两个是Ｘ，Ｙ坐标（圆心的坐标）<br /> RectangleHotSpot ：矩形，也可以是正方型（这个我ＴＭＤ试了半个小时了，还没懂）<br /> PolygonHotSpot ： 不规则形状（上面那个都没懂，这个我看难）<br /> <br /> 演示我就懒得做了，这下面有我在网上看的一个非常好的，地址是 <br /> http://blog.joycode.com/liuhuimiao/articles/50507.aspx<br /> <br /> 他已经做了很好的整理和演示，本随笔最下面是我把他的全部复制过来的</div> </form></body></html>
Default.aspx后台CS代码using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e)
{ if (!IsPostBack) { for (int i = 1; i < 5; i++) { DropDownList1.Items.Add(i + ".gif");//填充下拉列表
} } } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { Image2.ImageUrl = "~/img/" + DropDownList1.SelectedValue.ToString();//图片控件的地址为~/img/＋下拉菜单的值 } protected void ImageButton1_Click(object sender, ImageClickEventArgs e) {//响应图片的鼠标点击事件, switch (((ImageButton)sender).CommandName) { case "a": Label1.Text = "<a href='http://www.hc115.com'>想去洪川医药就在地址栏打上</a>"; Label1.Visible = true; //显示这个，其他两个隐藏起来 Label2.Visible = false; Label3.Visible = false; break; case "b": Label2.Text = "<a href='http://www.hc115.com'>想去看全国最好的医院就在地址栏打上</a>"; Label2.Visible = true; Label1.Visible = false; Label3.Visible = false; break; case"c": Label3.Text = "<a href='http://www.hc115.com'>想去洪川医药就在地址栏打上</a>"; Label3.Visible = true; Label2.Visible = false; Label1.Visible = false; break; } } protected void ImageButton4_Click(object sender, ImageClickEventArgs e) { int x = Convert.ToInt32(e.X); int y = Convert.ToInt32(e.Y); Label4.Text = "你鼠标刚才摔下来的位置是"+x+"."+y; if (x < 150 && y < 150)//为了让你看得清楚，你可以对比 Label4显示出来的坐标看下了！呵呵 { Label5.Text = "<a href='http://www.hc115.com'>你点了洪川医药的<b><font size=30>洪</font></b></a>"; } else if (x > 150 && y < 150) { Label5.Text = "<a href='http://www.hc115.com'>你点了洪川医药的<b><font size=30>川</font></b></a>"; } else if (x < 150 && y > 150) { Label5.Text = "<a href='http://www.hc115.com'>你点了洪川医药的<b><font size=30>医</font></b></a>"; } else if (x > 150 && y > 150) { Label5.Text = "<a href='http://www.hc115.com'>你点了洪川医药的<b><font size=10>药</font></b></a>"; } }
}
Delt.aspx前台HTML代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="delt.aspx.cs" Inherits="delt" %><!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></head><body> <form id="form1" runat="server"> <div> 详细显示页,这个本来没打算做，应 星缘梦雨 的问题而做，这个还可以（其实不是还可以，而应该是最主要的方式是，只是本标准控件系列演示是尽量不使用数据库，因为2005的数据库利用太方便了，几乎不写多少代码，所以也不好演示）再利用数据库给你做个更详细的，其实也没有什么，如果是动态的话，就是在使用ＧＥＴ方式传参的时候把图片ＩＤ利用 DataBinder.Eval的形式绑定起来，然后在本页利用Request.QueryString获取到ＩＤ，再从数据库取出来变可以了！<br /> <br /> 而当前最简单的方式是，在地址栏后面，把传来的参数 １ 换成 １－４的任意数字，看下效果，因为我只有４张图片，但是你可以有任意多图片，而且可以从数据取！<br /> <asp:Image ID="Image1" runat="server" Height="262px" ImageUrl="~/img/1.gif" Width="630px" /></div> </form></body></html>
Delt.aspx页后台CS代码using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class delt : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { string id=Request.QueryString["id"]; Image1.ImageUrl = "~/img/" + id + ".gif"; }}
