asp.net_ImageMap热区

热区HotSpots，绘制一块区域（圆形，矩形，多边形），点击这块区域可以跳转到指定的链接。

开发环境：Microsoft Visual Studio 2010

一、前端代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test02.aspx.cs" Inherits="test02" %><!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><asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="Navigate" ImageUrl="~/hotarea.jpg"><asp:CircleHotSpot NavigateUrl="https://www.sina.com.cn" Radius="50" X="100" Y="50" HotSpotMode="Navigate" /><asp:RectangleHotSpot Bottom="200" Right="200" Top="100" HotSpotMode="Navigate" NavigateUrl="https://www.163.com" /><asp:RectangleHotSpot Bottom="300" NavigateUrl="https://www.baidu.com" Right="200" Top="200" HotSpotMode="Navigate" /></asp:ImageMap><br /><br /><asp:Button ID="Button1" runat="server" Text="添加淘宝的热区" onclick="Button1_Click" /></div></form>
</body>
</html>

下面是图片素材：

二、具体怎么操作

工具箱双击ImageMap，在属性里找到ImageUrl，选中此图片（需要导到项目当中）

再找到HotSpots属性，会出现HotSpot集合编辑器，这里可以创建自定义的热区，CilcleHotSpot（圆形），RectangleHotSpot（矩形），PolygonHotSpot（多边形）

1.CircleHotSpot根据X和Y的坐标以及Radius半径的值创造出一个圆形热区，NavigateUrl就是需要跳转的目标链接（这里的X和Y的起点是图片的左上角）

2.RectangleHotSpot根据Bottom，Left，Right，Top四个属性来设置

3.PolygonHotSpot根据自定义的坐标来绘制多边形，记住，连接坐标的时候是按顺序的，如下图所示，（225，250）连到（180，285），以此类推，按顺序连接

asp.net_ImageMap热区相关推荐

html图片热区map、area的使用
html图片热区map.area的使用在项目中需要点击图片某个位置,然后变换不同的颜色. 之前听说dw可以通过拖拽实现,也可以通用canvas画布实现,但是太麻烦了而map的area可以定义一个坐 ...
ASP.NET知识点总结
ASP.NET知识点总结 1.ASP.Net的特色与优势 2.几对概念 3.解决方案构成 4.系统对象与状态管理 5.控件的分类 6.站点地图 7.系统导航 8.母版页 9.系统框架 10.数据绑定 ...
HTML图片热区map area的用法
HTML图片热区map area的用法 <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设 ...
ASP.NET MVC 2示例Tailspin Travel
Tailspin Travel 是一个旅游预订的应用程序示例,最新版本采用ASP.NET MVC 2技术构建,主要使用 DataAnnotations 验证, 客户端验证和ViewModels,还展示 ...
通过jQuery调用ASP.NET的AJAX
传统上,在ASP.NET页面中实现AJAX的方法是拖放一个ScriptManager控件,并进行一系列的设置和相关编程.但事实上,这并不是理想的解决方案.使用jQuery来调用ASP.NET后台的方法 ...
Asp.Net Core在线生成二维码
前言: 原先用zxing Code写过基于Winfrom的批量生成二维码工具,以及单个生成二维码工具:批量生成二维码Gihub源代码今天尝试用QRCoder 加 Asp.Net Core 写了一个在 ...
Asp.net MVC中的ViewData与ViewBag
在Asp.net MVC 3 web应用程序中,我们会用到ViewData与ViewBag,对比一下: ViewData ViewBag 它是Key/Value字典集合它是dynamic类型对像从 ...
ASP.NET MVC Identity 兩個多個連接字符串問題解決一例
按照ASP.NET MVC Identity建立了一個用戶權限管理模塊,由于還要加自己已有的數據庫,所以建立了一個實體模型,建立了之后,發現登錄不了: 一直顯示"Login in faile ...
ASP.NET页面之间传值的方式之QueryString（个人整理）
QueryString Querystring也叫查询字符串,这种页面间传递数据是利用网页地址URL.如果要从A页面跳转到B页面,则可以用Request.Redirect("B.aspx?参 ...

asp.net_ImageMap热区

asp.net_ImageMap热区相关推荐

最新文章

热门文章