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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 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
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
浅谈mint-ui 填坑之路
2017/11/06 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
贷款委托书
2014/08/01 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
什么是SOLID
2022/03/24 Javascript