Javascript基础_嵌入图像的简单实现


Posted in Javascript onJune 14, 2016

img元素允许我们在HTML文档里嵌入图像。

要嵌入一张图像需要使用src和alt属性,代码如下:

<img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" />

显示效果:

Javascript基础_嵌入图像的简单实现

1 在超链接里嵌入图像

img元素的一个常见用法是结合a元素创建一个基于图像的超链接,代码如下:

<a href="otherpage.html">
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" />
</a>

浏览器显示这张图片的方式没有什么不同。因此,重要的一点事要向用户提供视觉提示,表明特定图像所代表的是超链接。具体的做法可以是利用CSS,能在图像内容里表达则更好。

如果点击这种图片,浏览器会导航至父元素a的href属性所指定的URL上。给 img 元素应用 ismap 属性就创建了一个服务器端分部响应图,意思是在图像上点击的位置会附加到URL上。举个例子,如果点击的位置是距图像顶部8像素,左边缘10像素,浏览器就会导航到下面的地址:

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8

下面代码展示了 otherpage.html 中的内容,它包含了一个简单的脚本,用来显示点击位置的坐标:

<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The Y-coordinate is <b><span id="yco">??</span></b></p>
<script type="application/javascript">
  var coords = window.location.href.split('?')[1].split(',');
  document.getElementById("xco").innerHTML = coords[0];
  document.getElementById("yco").innerHTML = coords[1];
</script>
</body>

浏览器显示这张图片的方式没有什么不同。因此,重要的一点事要向用户提供视觉提示,表明特定图像所代表的是超链接。具体的做法可以是利用CSS,能在图像内容里表达则更好。

如果点击这种图片,浏览器会导航至父元素a的href属性所指定的URL上。给 img 元素应用 ismap 属性就创建了一个服务器端分部响应图,意思是在图像上点击的位置会附加到URL上。举个例子,如果点击的位置是距图像顶部8像素,左边缘10像素,浏览器就会导航到下面的地址:

https://yexiaochao.github.io/show4cnblogs/otherpage.html?10,8

下面代码展示了 otherpage.html 中的内容,它包含了一个简单的脚本,用来显示点击位置的坐标:

<body>
<p>The X-coordinate is <b><span id="xco">??</span></b></p>
<p>The Y-coordinate is <b><span id="yco">??</span></b></p>
<script type="application/javascript">
  var coords = window.location.href.split('?')[1].split(',');
  document.getElementById("xco").innerHTML = coords[0];
  document.getElementById("yco").innerHTML = coords[1];
</script>
</body>

可以看到鼠标点击产生的效果:

Javascript基础_嵌入图像的简单实现

服务器端分区响应图通常意味着服务器会根据用户在图像上点击区域的不同做出有差别的反应,比如返回不同的响应信息。如果省略了img元素上的 ismap 属性,鼠标点击的坐标就不会被包含在请求 URL 中。

2 创建客户端分区响应图

我们可以创建一个客户端分区响应图,通过点击某张图像上的不同区域让浏览器导航到不同的URL上。这一过程不需要通过服务器引导,因此需要使用元素定义图像上的各个区域以及它们所代表的行为。客户端分区响应图的关键元素是 map,map元素包含一个或多个area元素,它们各自代表了图像上可被点击的一块区域 。

area元素的属性可以分为两类,第一类处理的是area所代表的图像区域被用户点击后浏览器会导航到的URL。下图介绍了这一类属性,它们类似于在其他元素上见到过的对应属性。

Javascript基础_嵌入图像的简单实现

第二类则包含了更有意思的属性:shape 和 coords 属性。可以用这些属性来标明用户可以点击的各个图像区域。 shape 和 coords 属性是共同起作用的。 coords 属性的意思根据 shape 属性的值而定,正如下图所示:

Javascript基础_嵌入图像的简单实现

介绍完这些元素后,举个例子,代码如下:

<body>
  <img src="../img/example/img-map.jpg" ismap alt="Products Image" usemap="#mymap" width="580" height="266" />

<map name="mymap">
  <area href="javascript:show_page(1)" shape="rect" coords="'34,60,196,230" alt="product 1" />
  <area href="javascript:show_page(2)" shape="rect" coords="'210,60,370,230" alt="product 2" />
  <area href="javascript:show_page(3)" shape="rect" coords="'383,60,545,230" alt="product 3" />
</map>

<script type="application/javascript">
   function show_page(num){
     //通过对话框显示产品,表示对应的跳转页面
     alert("This is product "+num);
   }
</script>
</body>

显示效果是一样的,只是在点击对应的产品图片,会弹出对应的产品名称,表示跳转的产品页面。

以上这篇Javascript基础_嵌入图像的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 #Javascript
浅析JS获取url中的参数实例代码
Jun 14 #Javascript
Javascript基础_标记文字的实现方法
Jun 14 #Javascript
深入浅析JavaScript的API设计原则
Jun 14 #Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 #Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 #Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 #Javascript
You might like
php实现ping
2006/10/09 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP生成plist数据的方法
2015/06/16 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
基于python实现从尾到头打印链表
2019/11/02 Python
wxPython色环电阻计算器
2019/11/18 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
几个判断型的面试题
2012/07/03 面试题
环境工程专业自荐信
2014/03/03 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
追悼会答谢词范文
2015/09/29 职场文书
python pyhs2 的安装操作
2021/04/07 Python