`
zhangyaochun
  • 浏览: 2609211 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html浅谈之图像映射

阅读更多

或许做前端到现在你没有接触过图像映射这个东东,但是如果你是一个用过百度大搜索的同学,它就在你的面前,但是你没有注意哦。

 

---------------真相就是百度首页的中图其实就用了映射的原理。

 

1.映射

    ------------带有可点区域的图像。

 

2.html标签之map和area

 

 

  •    map标签
         -------定义一个客户端图像映射

<img src="xx.jpg" usemap="#mp" alt="大图" />
<map name="mp" id="mp">
    <area></area>
</map>

 主要注意以下几点:
  1. 所以主流的浏览器多支持map
  2. img标签的usemap属性可引用map中的id或者name属性(存在浏览器的差异)----所以为了屏蔽这个,我们应该在map标签中同时设置id和name属性
  3. 对应doctype设置strict/transitional/frameset的我们必须给map设置id属性(值是唯一的)
  • area标签
  1. 定义图像映射中的区域
  2. 它一般多是嵌套在map标签中的
<area shape="circle" coords="120,160,10" href="xxx.html" alt="一部分"/>
 
属性说明:

  1. alt
        ------------用来在图片加载失败的情况下显示替换的文本信息(这个属性一直被很多的人遗忘

     2.  coords
  
        ------------定义鼠标可点击的坐标

 

 

     3.  shape
  
        ------------定义鼠标可点击的区域的形状(default/rect/circ/poly)

     4.  target

        ------------定义指向的url

     5.  nohref

        ------------排除的某个区域

 

0
1
分享到:
评论

相关推荐

    探索HTML中的服务器端图像映射技术

    HTML提供了两种类型的图像映射:客户端图像映射和服务器端图像映射。本文将详细探讨服务器端图像映射的创建方法、应用场景及其与客户端图像映射的区别,并提供实际的代码示例。 服务器端图像映射是处理复杂用户交互...

    掌握HTML客户端图像映射:设计与实现

    本文将详细介绍如何在HTML中创建一个客户端图像映射,包括基本的HTML结构、CSS样式和一些JavaScript来增强交互性。 客户端图像映射是现代网站设计的关键组成部分,它能够提供跨设备的一致用户体验。通过结合HTML、...

    基于图像映射的关联规则数据挖掘方法研究.pdf

    近年来,基于图像映射的关联规则数据挖掘方法逐渐成为研究热点,它通过将数据项映射到图像中,利用图像处理技术来提升数据挖掘的效率和效果。 首先,传统的关联规则挖掘算法在面对大数据集时,往往需要多次扫描...

    matlab开发-使用图像映射保存

    本教程将详细讲解如何利用MATLAB进行图像映射保存,特别是将图保存为PNG文件以及生成对应的HTML文件。 首先,我们需要理解PNG文件格式。PNG(Portable Network Graphics)是一种无损压缩的位图格式,支持透明度和...

    logistic映射,tent映射,Henon映射,Kent映射的Matlab程序及图像

    包括logistic映射,tent映射,Henon映射,Kent映射的Matlab程序及图像。(Including the logistic map, tent map, Henon mapping Kent Matlab program and image mapping.)

    Free Imagemapper HTML图像映射工具 v2.2官方版

    为您提供Free Imagemapper HTML图像映射工具下载,Free Imagemapper是一款专业的为网页创建交互式html图像映射的软件,支持生成客户端和服务器端的图像映射,以及绘制、修改和设置图像映射图像上的“热点”属性,...

    Matlab GUI用于实现图像的灰度映射

    在图像处理领域,灰度映射(灰度查找表,Lookup Table,简称LUT)是一种常用的图像增强技术,主要用于改变图像的亮度、对比度或色彩。Matlab作为一个强大的数值计算和可视化工具,提供了丰富的图像处理功能,包括...

    四维猫映射置乱.zip_Arnold映射_四次猫映射置乱图像_四维置乱_图像映射_猫映射

    四维猫映射置乱是一种在计算机图形学和信息安全领域广泛应用的高级图像处理技术,它基于Arnold映射理论,用于创建复杂的、难以预测的图像序列,常用于图像加密和安全传输。Arnold映射,又称为猫映射,是由数学家...

    kinectV2.0深度图像与彩色图像的坐标映射

    在"kinectV2.0深度图像与彩色图像的坐标映射"项目中,目标是建立一个实时系统,能够对深度图像上的任意像素点找到其在彩色图像中的对应点,并在同一窗口中同时显示这两类图像。这样的功能有助于直观地理解两者之间的...

    【项目代码】2D图像映射并计算对应的3D的距离.rar

    在计算机视觉领域,2D图像映射到3D距离的计算是一个重要的研究课题。这个项目代码的核心在于将二维图像中的像素点转化为三维空间中的坐标,从而估算出它们相对于摄像头的位置和距离。这一过程涉及到多个关键知识点,...

    通过调节图像的灰度范围进行映射_亮度映射_灰度范围_灰度映射范围_matlab图像处理_zulur1h_

    在图像处理领域,调整图像的灰度范围是一种常见的技术,用于改善图像的视觉效果,特别...至于提供的压缩包子文件列表,它们看起来像是一个Microsoft Word文档的组成部分,与图像处理的主题无关,因此不在本次讨论之列。

    高动态范围图像色调映射技术展望

    ### 高动态范围图像色调映射技术的发展与展望 #### 概述 高动态范围图像(High Dynamic Range Image,简称HDR图像)是一种能够记录比普通图像更宽亮度范围的图像格式,它能够更好地反映真实世界的视觉体验。由于...

    基于Henon映射的数字图像加密

    ### 基于Henon映射的数字图像加密 #### 概述 随着信息技术和互联网的飞速发展,数字图像的传输与存储变得越来越频繁,同时也带来了数据安全方面的新挑战。为了保护图像信息免受非法访问和篡改,研究者们提出了多种...

    二维猫映射图像加密的matlab实现代码

    基于二维猫映射的图像加密的matlab实现代码,包括加密和解密的运算,加上了图像加密后的灰度统计分布直方图

    图像旋转 matlab代码 前向反向.rar_前向映射_前向映射旋转_反向映射图像_图像旋转_旋转图像

    总的来说,图像旋转是图像处理的基础操作之一,而前向映射和反向映射是实现这一操作的常用技术。掌握这两者对于进行图像分析、增强或其他图像处理任务都有极大的帮助。通过学习和实践这些MATLAB代码,你将能够更好地...

    \基于Henon映射的数字图像加密.pdf

    ### 基于Henon映射的数字图像加密 #### 概述 随着信息技术和多媒体通信技术的迅猛发展,图像信息传输的需求日益增加,随之而来的是对于图像安全性和保密性的高度重视。数字图像加密技术作为保障图像信息安全的重要...

    经纬度映射法校正鱼眼图像 程序

    经纬度映射法是一种常用的鱼眼图像矫正技术,它通过建立图像像素与地球表面经纬度之间的映射关系来校正畸变。具体步骤如下: 1. **坐标转换**:首先,我们需要将鱼眼图像的像素坐标转换为球面坐标(经度和纬度)。...

    MATLAB处理向前映射和向后映射

    MATLAB关于数字图像处理中的前向映射和后向映射

Global site tag (gtag.js) - Google Analytics