ImageMap的用法

最新推荐文章于 2024-06-22 09:41:11 发布
最新推荐文章于 2024-06-22 09:41:11 发布
阅读量1.1w 收藏 3
点赞数 1
分类专栏： C#开发学习笔记 网站开发 文章标签： postback button asp server object xhtml
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">
<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">
<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>

 

 

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
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ImageButton和ImageMap控件的使用
切尼的专栏
07-27 3854
 1. ImageButton控件图片按钮控件可以在按钮上显示一副图片，并代替按钮控件的基本功能，不仅如此，图片按钮控件还可以方便的获取图片的点击位置。 基本使用步骤：l         拖拽一个imageButton按钮，选择imageurl为他添加一个图片。l         为imageButton按钮添加单击时件。protected void ImageBu
ASP.NET ImageMap控件的快速入门课程
04-01
4. **自定义样式**：为了增加视觉效果，可以使用CSS来修改ImageMap控件的外观，例如，为不同的形状添加不同的鼠标悬停效果。 5. **动态生成ImageMap**：在某些情况下，你可能需要根据用户输入或数据库数据动态生成...
ASP.NET 中ImageMap控件的用法
10-22
本文主要介绍ImageMap控件的使用方法，并做了简单的代码演示，希望能帮到大家。
ImageMap控件
大头
04-09 1363
添加一个imageMap控件,在属性ImageUrl里设置图片来源,点击属性HotSpots设置热区,热区的设定是通过HotSpot属性来实现的。  热区可以为3种形状。  1、CircleHotSpot热区为圆形。  2、RectangleHotSpot热区为矩形。  3、PolygonHotSpot热区为多边形。   例如：  热区为RectangleHotSp
发现了什么宝藏？— 强力图片映射(Image Map)插件深度探索！
最新发布
gitblog_00056的博客
06-22 245
???? 发现了什么宝藏？— 强力图片映射(Image Map)插件深度探索！ 项目地址:https://gitcode.com/clarketm/image-map 在互联网的浩瀚海洋中，偶尔会发现一些既实用又新颖的技术工具，今天要为大家揭开的正是这样一颗璀璨明珠——Image-Map。这是一款纯JavaScript打造的图片映射插件，它不仅响应式设计友好，还能在图像或视口变化时自动重新渲染。无论你是...
Image Map的制作
weixin_34407348的博客
01-08 1733
映射图像（Image Map），它是指一幅根据链接对象不同而被人为划分为若干指向不同链接的区域或“热点”（Hotspots）的相应图像区域，当点击设置好的“热点”时，会弹出链接的相应页面。 需要在一张图片中，设置一个区域为热点就用到了&lt;map&gt;和&lt;area&gt;，其中&lt;area&gt; 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。 注释： ...
使用image-map编写校区平面示意图
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
11-15 970
vant+image-map，实现校区平面示意图，点击不同区域时弹窗该区域相关信息，很有意思的，哈哈
图像映射map
weixin_33919941的博客
08-30 237
&lt;map&gt;标签：带有可点击区域的图像映射 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。  效果图： 点击相应蓝色标签可进入详情页面浏览。 代码： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&amp
ImageMap
a82409的博客
12-21 154
响应用户单击 可以指定在用户单击 ImageMap 控件上的某个作用点时发生的事件。可以将每个作用点配置为超链接，通过该超链接可以转到您为该作用点提供的 URL。或者，可以将控件配置为在用户单击某个作用点时执行回发，为每个作用点提供一个唯一值。回发会引发 ImageMap 控件的 事件。在事件处理程序中，可以读取分配给每个作用点的唯一值。如何：响应 ImageMap Web 服务...
【ASP.NET编程知识】ASP.NET 中ImageMap控件的用法.docx
05-17
ASP.NET 中ImageMap控件的用法 ASP.NET 中的ImageMap控件是一种强大的控件，可以创建一个图像，使其包含许多可由用户单击的区域（热区），这些区域称为“作用点”。每一个作用点都可以是一个单独的超链接或回发...
flex 给ImageMap添加描点，事件，并动态加载ImageMap 控件
08-12
首先，我们需要了解ImageMap的基本用法。ImageMap是基于Flash的Sprite类，可以容纳多个HotSpot对象，每个HotSpot代表图像上的一个可点击区域。HotSpot通常由坐标定义，这些坐标是相对于图像左上角的像素位置。 1. *...
ImageMap的使用
流水专栏
09-01 1948
通过仔细摸索，我终于知道ImageMap的矩形块的Left， Top， Right，Bottom属性的意思了，其实他的这个我原来理解是矩形块距离左边的值为left，距离上面的值为top，距离右边的为right，距离下面的为bottom，结果事实不是这样的，总是应该以图片的左上角为坐标原点，在分别向下，向右取正数为坐标，所以应该这样理解(left，top)应该为一组坐标，就是矩形左上角顶点的坐标，(
Image Map
u013571243的专栏
10-03 333
usemap是img标签的一个属性,用来处理img不同坐标的事件 使用例子 Using JavaScript Image Map <!-- function showTutorial(name){ document.myform.stage.valu
javascript系列之image map
StayAlive1887的博客
08-18 219
map>元素实际上为图像创建map，通常紧跟在元素之后。元素仅包含一个属性，即name属性，该属性是标识map的名称。这就是元素直到要使用哪个客户端的image map通过标签的usemap属性启用，并由特殊的和扩展标记定义。通过使用元素将image插入到网页中，这里可以使用额外的属性usemap。usemap的属性值是元素上name属性的值，要满足该属性，前面带有井号或哈希符号。
JS Image Maps
专栏
03-06 1299
An image-map is an image with clickable regions.图象映象是图片的可点区域（一图片多个链接区）Examples举例Simple HTML Image map[简单的图象映象]Image map with added JavaScript[添加JS的图象映象（多了文字的说明）]HTML Image MapsHTML 图象映象F
php img-map,<map> - HTML 开发手册 - php中文网手册
weixin_31486289的博客
03-18 74
HTML 标签实例html>php中文网(php.cn)点击太阳或其他行星，注意变化：运行实例 »点击 "运行实例" 按钮查看在线实例浏览器支持目前大多数浏览器支持 标签。标签定义及使用说明 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)，所以我们应同时向 添加 id 和 name 属性。are...
前端怎么对一张图片特定某些点进行点击事件（image-map）
han_xiao_xiao的博客
09-02 2958
解决方案：把图片要点击的点生成map。
畸变相关算子：map_image
wangMaryann的专栏
04-10 1313
map_image(Image, Map : ImageMapped : : ) /************************************************************************ * @brief 映射图像 * @param Image [IN] 原始图 * @param M...
在Android中写一段java代码使用dhash算法找出List<File> fileList这个fileList中所有具有相似图片的图片文件，并将它们保存在Map<String, List<String>>中
05-25
以下是使用dhash算法在Android中找出具有相似图片的文件的Java代码，将它们保存在Map<String, List<String>>中： ```java import java.io.File; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class DHashAlgorithm { // DHash算法的阈值 private static final int THRESHOLD = 5; // 获取图片的dhash值 private static String getDHash(File file) { Bitmap bitmap = BitmapFactory.decodeFile(file.getAbsolutePath()); bitmap = Bitmap.createScaledBitmap(bitmap, 9, 8, true); int[] pixels = new int[bitmap.getWidth() * bitmap.getHeight()]; bitmap.getPixels(pixels, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), bitmap.getHeight()); StringBuilder sb = new StringBuilder(); for (int i = 0; i < pixels.length; i++) { sb.append((pixels[i] & 0xff) > (pixels[i + 1] & 0xff) ? "1" : "0"); } String dHash = ""; for (int i = 0; i < sb.length(); i += 4) { int decimal = Integer.parseInt(sb.substring(i, i + 4), 2); dHash += Integer.toHexString(decimal); } return dHash; } // 计算dhash值之间的汉明距离 private static int getHammingDistance(String dHash1, String dHash2) { int hammingDistance = 0; for (int i = 0; i < dHash1.length(); i++) { if (dHash1.charAt(i) != dHash2.charAt(i)) { hammingDistance++; } } return hammingDistance; } // 找出具有相似图片的文件，并将它们保存在Map<String, List<String>>中 public static Map<String, List<String>> findSimilarImages(List<File> fileList) { Map<String, List<String>> imageMap = new HashMap<>(); for (int i = 0; i < fileList.size(); i++) { File file1 = fileList.get(i); String dHash1 = getDHash(file1); List<String> similarImages = new ArrayList<>(); for (int j = i + 1; j < fileList.size(); j++) { File file2 = fileList.get(j); String dHash2 = getDHash(file2); int hammingDistance = getHammingDistance(dHash1, dHash2); if (hammingDistance <= THRESHOLD) { similarImages.add(file2.getAbsolutePath()); } } if (similarImages.size() > 0) { imageMap.put(file1.getAbsolutePath(), similarImages); } } return imageMap; } } ``` 使用方法： ```java List<File> fileList = new ArrayList<>(); fileList.add(new File("/path/to/image1.jpg")); fileList.add(new File("/path/to/image2.jpg")); fileList.add(new File("/path/to/image3.jpg")); Map<String, List<String>> imageMap = DHashAlgorithm.findSimilarImages(fileList); ``` 其中，fileList是包含所有图片文件的列表，imageMap是保存具有相似图片的文件的Map对象。如果两张图片的dhash值之间的汉明距离小于等于THRESHOLD（默认为5），则认为它们是相似的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值