VS2005新控件之 image/imagebutton/imagemap

最新推荐文章于 2008-01-18 11:33:00 发布

thcjp

最新推荐文章于 2008-01-18 11:33:00 发布

阅读量1.5k

点赞数

分类专栏： VS2005控件演示文章标签： postback asp server dreamweaver image button

本文链接：https://blog.csdn.net/thcjp/article/details/1145123

版权

VS2005控件演示专栏收录该内容

28 篇文章 0 订阅

订阅专栏

完整源文件下载地址 http://www.cnblogs.com/Files/thcjp/image.rar

Image相关的有三个控件，一个是image 二个是 ImageButton
三个是!!铛铛铛，新控件--ImageMap ,依我的说法，其实这控件压根就一鸡肋，没意思，说它是鸡肋也不是没道理，可以用在图片上特定的区域响应事件，其次是可以导航，我不知道微软的人见过Dreamweaver没有，我想没有，否则的话他们的这个控件不会做得这么难用，你看Dreamweaver的热点多好用，呵呵，闲话少说，开工！！！

<%@ 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">

</head>

<body>

<div>

Image相关的有三个控件，一个是image  二个是 ImageButton

<br />

三个是!!铛铛铛，新控件--ImageMap ,依我的说法，其实这控件压根就一鸡肋，没意思，说它是鸡肋也不是没道理，可以用在图片上特定的区域响应事件，其次是可以导航，我不知道微软的人见过Dreamweaver没有，我想没有，否则的话他们的这个控件不会做得这么难用，你看Dreamweaver的热点多好用，呵呵，闲话少说，开工！！！<br />

<br />

演示一 Image

<br />

直接贴的图片，没什么好说的，就一个属性，ImageUrl<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 />

演示二：告诉你，你点了图片上的什么位置（以XY的方式），还是有点用吧！下面这个如果感觉不好理解的话咨询QQ110535808 ，我很乐意帮忙的！当然也可以到thcjp.cnblogs.com查看相关的东西<br />

<br />

<asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/img/4.gif" OnClick="ImageButton4_Click" />

<asp:Label ID="Label4" runat="server"></asp:Label> 

<br />

<asp:Label ID="Label5" runat="server"></asp:Label><br />

<br />

ImageMap 演示之 Navigate URL  ，如果撇开这个URL可以在服务器中更换这个优点，他就没用了，呵呵，因为DW的热点肯定比他这个直观多了！（注意哦，这两图片虽然是一样的，但是上面那个是ImageButton,而下面这个是ImageMap）<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>

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>";

}

<%@ 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">

</head>

<body>

<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>

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";

}

Feedback

# re: VS2005新控件之 image/imagebutton/imagemap 回复 删除评论 修改评论

2006-05-31 00:01 by 天轰穿

================下面是转载的ASP.NET2.0 新增控件(1)——ImageMap========================
原地址是 http://blog.joycode.com/liuhuimiao/articles/50507.aspx

ImageMap控件是一个让你可以在图片上定义热点（HotSpot）区域的服务器控件。用户可以通过点击这些热点区域进行回发（PostBack）操作或者定向（Navigate）到某个URL位址。该控件一般用在需要对某张图片的局部范围进行互动操作时，其主要属性有HotSpotMode、HotSpots和主要操作Click。

? HotSpotMode：顾名思义为热点模式，对应枚举类型System.Web.UI.WebControls.HotSpotMode。其选项及说明如下：

1) NotSet：未设置项。虽然名为未设置，但其实默认情况下会执行定向操作，定向到你指定的URL位址去。如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。

2) Navigate：定向操作项。定向到指定的URL位址去。如果你未指定URL位址，那默认将定向到自己的Web应用程序根目录。

3) PostBack：回发操作项。点击热点区域后，将执行后部的Click事件。

4) Inactive：无任何操作，即此时形同一张没有热点区域的普通图片。

? HotSpots：该属性对应着System.Web.UI.WebControls.HotSpot对象集合。HotSpot类是一个抽象类，它之下有CircleHotSpot（圆形热区）、RectangleHotSpot（方形热区）和PolygonHotSpot（多边形热区）三个子类。实际应用中，都可以使用上面三种类型来定制图片的热点区域。如果需要使用到自定义的热点区域类型时，该类型必须继承HotSpot抽象类。下面即有个自定义的菱形热区DiamondHotSpot范例可以参考。

? Click：对热点区域的点击操作。通常在HotSpotMode为PostBack时用到。

对ImageMap控件有了以上一个基本了解后，接着看ASP.NET QuickStart提供个两个应用示例和最后一个自定义菱形热区示例就会有所体会了。

示例一：ImageMap 多种HotSpotMode 示例

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">"> http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

</script>

<html xmlns=" http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3><font face="Verdana">ImageMap 多种 HotSpotMode 示例</font></h3>

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"

runat="Server">

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="navigate1.htm"

alternatetext="Button 1"

top="30"

left="175"

bottom="110"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="navigate2.htm"

alternatetext="Button 2"

top="155"

left="175"

bottom="240"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Navigate"

NavigateUrl="navigate3.htm"

alternatetext="Button 3"

top="285"

left="175"

bottom="365"

right="355">

</asp:RectangleHotSpot>

</asp:imagemap>

</div>

</form>

</body>

</html>

示例二：ImageMap PostBack 模型示例

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">"> http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

void Buttons_Clicked(object sender, ImageMapEventArgs e)

{

label1.Text = e.PostBackValue + " clicked!";

}

</script>

<html xmlns=" http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>

<font face="Verdana">ImageMap PostBack 模型示例</font></h3>

<asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"

hotspotmode="Postback" οnclick="Buttons_Clicked" runat="Server">

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Button1"

alternatetext="Button 1"

top="30"

left="175"

bottom="110"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Button2"

alternatetext="Button 2"

top="155"

left="175"

bottom="240"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Button3"

alternatetext="Button 3"

top="285"

left="175"

bottom="365"

right="355">

</asp:RectangleHotSpot>

<asp:RectangleHotSpot

hotspotmode="Postback"

postbackvalue="Background"

alternatetext="Background"

top="0"

left="0"

bottom="390"

right="540">

</asp:RectangleHotSpot>

</asp:imagemap>

<p>

<h3>

<font face="verdana">

<asp:Label ID="label1" runat="server"></asp:Label>

</font>

</h3>

</p>

</div>

</form>

</body>

</html>

示例三：自定义热点区域 DiamondHotSpot 菱形热点区域

1. 创建DiamondHotSpot类

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;

namespace HotSpotTest

{

public class DiamondHotSpot : System.Web.UI.WebControls.HotSpot

{

public int CenterX

{

get

{

object val = ViewState["centerx"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["centerx"] = value;

}

}

public int CenterY

{

get

{

object val = ViewState["centery"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["centery"] = value;

}

}

public int Width

{

get

{

object val = ViewState["width"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["width"] = value;

}

}

public int Height

{

get

{

object val = ViewState["height"];

if (val == null)

return 0;

else

return (int)val;

}

set

{

ViewState["height"] = value;

}

}

protected override string MarkupName

{

get

{

return "poly";

}

}

public override string GetCoordinates()

{

return CenterX.ToString() + "," +

(CenterY - Height / 2).ToString() + "," +

(CenterX + Width / 2).ToString() + "," +

CenterY.ToString() + "," +

CenterX.ToString() + "," +

(CenterY + Height / 2).ToString() + "," +

(CenterX - Width / 2).ToString() + "," +

CenterY.ToString();

}

}

}

2. 在页面写 Register 指令

<%@ Register TagPrefix="HotSpotTest" Namespace="HotSpotTest" %>

3. 在后部代码里动态添加菱形热区，或者直接在页面代码里声明菱形热区

? 后部代码动态添加：

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

HotSpotTest.DiamondHotSpot dhs = new HotSpotTest.DiamondHotSpot();

dhs.CenterX = 100;

dhs.CenterY = 50;

dhs.Height = 100;

dhs.Width = 50;

ImageMap1.HotSpots.Add(dhs);

}

}

? 页面代码声明：

<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="hotspot.jpg" HotSpotMode="PostBack">

<HotSpotTest:DiamondHotSpot CenterX="100" CenterY="50" Height="100" Width="50" />

</asp:ImageMap>

[总结]：在大部分Web应用中可能很少会用到ImageMap，但正因为有了ImageMap，才让Web应用更加多姿多彩。有了ImageMap，我们可以动态的在一张图片中的某个局部范围内进行相应的处理请求的梦想再也不遥远。

参考及引用资料列表：

1. http://beta.asp.net/QUICKSTART/aspnet/doc/ctrlref/standard/imagemap.aspx

2. http://weblogs.asp.net/dannychen/archive/2005/04/11/399873.aspx

3. MSDN Library for Visual Studio 2005 beta2

thcjp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VS2005新控件之 image/imagebutton/imagemap

完整源文件下载地址 http://www.cnblogs.com/Files/thcjp/image.rarImage相关的有三个控件，一个是image 二个是 ImageButton 三个是!!铛铛铛，新控件--ImageMap ,依我的说法，其实这控件压根就一鸡肋，没意思，说它是鸡肋也不是没道理，可以用在图片上特定的区域响应事件，其次是可以导航，我不知道微软的人见过Dreamweaver
复制链接

扫一扫