添加了 JavaScript 的图像映射

最新推荐文章于 2023-07-18 15:10:37 发布
最新推荐文章于 2023-07-18 15:10:37 发布
阅读量820 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用图片热点</title>
        <script type="text/javascript">
            function writeText(text){
                document.getElementById("desc").innerHTML = text;
            }
        </script>
    </head>
    <body>
        <img src="img/eg_planets.jpg" usemap="#planetmap" alt="Planets"/>
        <map name="planetmap">
            <area shape="circle" coords="180,139,14" onMouseOver="writeText('直到 20 世纪 60 年代，'+
                '金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
            href ="#" target ="_blank" alt="Venus" />
            <area shape="circle" coords="129,161,10" onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
            href ="#" target ="_blank" alt="Mercury" />
            <area shape="rect" coords="0,0,110,260" onmouseover="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')" 
                alt="Sun" href="#" target="_blank"/>
        </map>
        <p id="desc"></p>
    </body>
</html>

转载于http://www.w3school.com.cn/tiy/t.asp?f=jseg_imagemap

Dev-Liangjian
关注
专栏目录
JavaScript映射
weixin_70806918的博客
10-31 2721
JavaScript映射
添加了javascript的图像映射
不积跬步无以至千里不积小流无以成江海
12-20 947
添加了javascript的图像映射
JS映射
KK3K2005的专栏
04-15 3183
<!-- .title{color:blue;}-->this,[function].callerarguments,arguments.calleeapply,callconstructor,prototype我把以上这些个对象（方法？成员？） 归入JS运行时的映射 可能不是很贴切 希望这样能便于理解thi
JS对象映射
最新发布
m0_52256117的博客
07-18 750
在JavaScript中，对象映射是指将一个对象的属性映射到另一个对象的过程。这可以通过使用对象的属性来创建新对象，或者通过复制一个对象的属性和值到另一个对象来实现。通过js增加代码的复用性和整洁性，避免使用过多的if语句。
tesi
longyuan20102011的专栏
12-20 323
function writeText(txt) { document.getElementById("desc").innerHTML=txt } <area shape="circle" coords="180,139,14" onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两
用于创建可以导出为 HTML 或 SVG 的 图像映射 的 javascript工具_代码_下载
06-14
勾选的已经实现 了，其他的都是我以后打算添加的。 在画布上拖放 照片 一个.map.json保存文件 通过滚动放大和缩小 中心点击平移 通过右键单击具有以下选项的区域来显示菜单： 设置网址 设置标题 删除 前进 向后移动...
Javascript图像处理—虚拟边缘介绍及使用方法
01-19
虚拟边缘 虚拟边缘就是按照一定映射关系，给图像添加边缘。 那么虚拟边缘有什么用呢？比如可以很容易做一个倒影的效果： 当然这只是附带效果了，虚拟边缘主要用在图像卷积运算（例如平滑操作）时候，由于卷积运算的...
MapServerPHP和JavaScript Web映射框架和演示应用程序-开源
04-13
MapServerPHP和JavaScript Web映射框架是用于创建交互式地理信息系统（GIS）应用程序的强大工具，它们结合了MapServer的核心功能，使得开发人员可以构建基于Web的地理数据可视化平台。MapServer是一个开源项目，它...
HoverTextOnImage：CSS和HTML文本（包括链接）在图像区域（如图像映射）上的悬停文本
02-18
`<map>`标签定义了一个图像映射，它包含一个或多个`<area>`标签，每个`<area>`标签代表图像上的一个可点击或悬停的区域。`<area>`标签的`shape`属性可以设置为`rect`（矩形）、`circle`（圆形）或`poly`（多边形），...
33.JavaScript映射与集合（Map、Set）数据类型基础知识介绍与使用
魏大大
06-13 4674
前文的学习过程中，我们已经了解了非常多的数据类型，包括基础类型、复杂的对象、顺序存储的数组等。为了更好的应对现实生产中的情况，我们还需要学习更多的数据类型：映射（）和集合（）。是一个键值对构成的集合，和对象非常相似，都是由一个名称对应一个值组成的。和对象区别在于，的键可以采用任何类型的数据，而对象只能使用字符串作为属性名称。举个例子： 代码执行结果：方法返回本身。虽然方式同样可以访问映射的键值对，但是不推荐使用这种方式，因为它会造成歧义。我们可以看下面的案例： 这里就出现了一个奇怪的结果：不仅使用键还可以使
JS与表映射
05-13
JS与表映射，与相关的表对应，可以直接保存到数据库中
JS的映射与解析
王阿星的博客
02-01 2832
今天刷到一道有意思的题，评论还延伸了几道，在这列出来顺便解析一波 题目：['1', '2', '3'].map(parseInt) what & why ? 我的想法：第一眼看到这个题目的时候，脑海跳出的答案是 [1, 2, 3]，但是真正的答案是[1, NaN, NaN] 首先回顾一下map函数： 语法: array.map(function(currentValue,index...
javascript实现映射表
前端之路修远兮
10-28 9197
期望通过javascript实现数据映射： const testJson = { '汤姆|Tom':'Tom', '鲍勃|Bob':'Bob', '杰克|Jack':'Jack' } const keyValue = (name)=&amp;gt;{ for(key in testJson){ if (testJson.hasOwnProperty(key)) { let keys =...
浅谈JS的映射和集合
05-22 1404
Map（映射）和Set（集合）是ES6引入的数据结构，它们提供了更灵活、高效的方式来存储和访问数据。本文将介绍一下这两种数据结构以及WeakMap和WeakSet这两种新的数据结构的概念及使用。
神奇实现图片映射功能
土家稀哥
09-04 1230
虽然这个用的不多，但用到的时候还是很方便的，首先需要有一张图片，这里拿中国地图为例： 如果要做这种映射的话大家可以到百度去搜索这个图片 第一步：给大家介绍这个神奇 网址：Image Map Tool 界面如下： 第二步：加载映射的图片 第三步：点击开始制作 第四步：点击继续 第五步：点击右键根据自己的需求选择相应的形状进行填写相应信息即可 第六步：填写好信
【Javascript】 集合与映射
这个家伙很懒...
11-17 978
Map JavaScript对象，本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。 相关方法 // 添加元素 set()方法支持连缀调用 // 如果对同一个键多次赋值，后面的值将覆盖前面的值 m.set(o,
JS图像映射的应用，在一个图片点击或移动到不同位置有不同响应
AKmumu的专栏
08-19 2283
使用上面的图片，命名为ying.jpg。 代码如下： function writeText(txt) { document.getElementById("desc").innerHTML=txt } href="#" target="_blank" alt="rect_red" /> href="#" target="_blank"
html —— map元素与area元素制作图像映射
永远的北极光
06-19 2589
图像映射适合于一幅图像的某(或几)个区域点击后跳转到另一(或多)个页面的情况，见于某些网站首页等。 W3School示例： 步骤： 1、确定一幅要做映射的图像，以及某些映射区域与形状； 2、通过map与area元素定义链接与区域的映射关系，并给map一个name与id(两个都需要，浏览器可能有差异)； 3、图像通过usemap属性绑定map元素。
JavaScript Map（映射）和Object（对象）的区别和联系
zgq1259805541的博客
04-07 1914
Map和Object的区别 1.键值 Object :键值只能是字符串和symbol Map: 键值可以使任意属性，Object也可以 2. 创建方式 Object: let user = new Object(); // “构造函数” 的语法 let user = {}; // “字面量” 的语法 Map: // 键值对 [key, value] 数组 let map = new Map([ ['1', 'str1'], [1, 'num1'], [true, 'bool1']
Javascript图像处理：虚拟边缘原理与应用实例
虚拟边缘是指通过特定的映射关系在图像边缘周围添加额外的像素，这些像素通常是与原始像素有某种关联，如镜像反射、重复值填充或恒定值。在图像卷积时，由于卷积核的大小可能超过图像的边界，为了确保边缘区域也能被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值