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 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
vue引入jq插件的实例讲解
Sep 12 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 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制作简单的内容采集器的代码
2007/11/28 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Python探索之Metaclass初步了解
2017/10/28 Python
对Python中range()函数和list的比较
2018/04/19 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
Python学习笔记之装饰器
2020/08/06 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
毕业生求职简历的自我评价
2013/10/07 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
教师继续教育反思周记
2015/06/25 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android