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 相关文章推荐
理解Javascript_10_对象模型
Oct 16 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
JS控制输入框内字符串长度
May 21 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
Vue的MVVM实现方法
Aug 16 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
微信小程序自定义导航栏实例代码
Apr 05 Javascript
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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
javascript常用函数(2)
2015/11/05 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python实现彩票系统
2020/06/28 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python机器学习实现决策树
2019/11/11 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
python名片管理系统开发
2020/06/18 Python
Python实现自动签到脚本功能
2020/08/20 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
七年级数学教学反思
2014/01/22 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
护士个人年终总结
2015/02/13 职场文书
活着观后感
2015/06/03 职场文书