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

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

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

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

显示效果：

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>

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

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

2 创建客户端分区响应图

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

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

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

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

<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基础_嵌入图像的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现防止网页被嵌入Frame框架的代码分享

    最近,国内开始流行另一种流氓行为:使用框架(Frame),将你的网页嵌入它的网页中. 比如,有一家网站号称自己是"口碑聚合门户",提供全国各个网上论坛的精华内容.但是,其实它就是用框架抓取他人的网页,然后在上面加上自己的广告和站标,这同盗版书商有何不同?! 防止方法,在 复制代码 代码如下: </body> 之前加入这段代码: 复制代码 代码如下: <script type="text/javascript">  if ( top.locat

  • 在JavaScript里嵌入大量字符串常量的实现方法

    数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大量的字符连接符号甚至加上缩进,强制换成好几行.例如: 复制代码 代码如下: var html =    '<div>' +        '<p>Hello</p>' +        '<p>World'</p>' +    '</div>'; 这还好,要是字符串里有不少双引号单引号,那就更麻烦了,各种转义字符看的眼花缭乱. 其实有个不怎么起眼的小技巧,就能解决这个

  • 嵌入式iframe子页面与父页面js通信的方法

    本文实例讲述了嵌入式iframe子页面与父页面js通信的方法.分享给大家供大家参考.具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信 父页面 parent.html: 复制代码 代码如下: <html> <head> <script type="text/javascr

  • JavaScript基本的输出和嵌入式写法教程

    JavaScript 没有任何打印或者输出的函数. 在 HTML 中, JavaScript 通常用于操作 HTML 元素. 操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容: 实例 <!DOCTYPE html> <html> <body> <h1&

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

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

    img元素允许我们在HTML文档里嵌入图像. 要嵌入一张图像需要使用src和alt属性,代码如下: <img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" /> 显示效果: 1 在超链接里嵌入图像 img元素的一个常见用法是结合a元素创建一个基于图像的超链接,代码如下: <a href="

  • Javascript基础_简单比较undefined和null 值

    JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心.在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn4UndefinedAndNull</title> </head

  • Javascript基础_标记文字的实现方法

    Javascript基础_标记文字的实现方法

    Javascript基础_标记文字的实现方法  1.用基本的文字元素标记内容 先看显示效果: 对应HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn4Font</title> </head> <body> <p> 元素 b -- <b>

  • javascript基础进阶_深入剖析执行环境及作用域链

    javascript基础进阶_深入剖析执行环境及作用域链

    执行环境 执行环境定义了变量或函数有权访问的其他函数,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象. 变量对象 环境中定义的所有变量和函数都保存在这个对象中. 全局执行环境 全局执行环境是最外围的一个执行环境.在web浏览器中,全局执行环境被认为是Window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的. 每个函数都有自己的执行环境. 作用域链 当代码在一个环境中执行,会创建变量对象的一个作用域链. 用途:保证对执行环境有权访问的所有变量和函数有序访问.

  • JavaScript基础之AJAX简单的小demo

    AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. function prepareForms() { for(var j=0 ; j<document.forms.length ; j++){ var this_forms = document.forms[j]; rese

  • JavaScript 基础函数_深入剖析变量和作用域

    函数定义和调用 定义函数,在JavaScript中,定义函数的方式如下: function abs(x){ if(x >=0){ return x; }else{ return -x; } } 上述abs() 函数的定义如下: function 指出这是一个函数定义; abs 是函数的名称: (x) 括号内列出函数的参数,多个参数以,分隔: {...}之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句. 注意:函数体内部的语句在执行时,一旦执行到return 时,函数就执行完毕,并将结果

  • JavaScript基础篇（3)之Object、Function等引用类型

    JavaScript基础篇（3)之Object、Function等引用类型

    阅读目录 Object类型 1.通过构造函数来创建 2.通过字面量表示法来创建对象 Array类型 同样Array也有两种创建方式: 如果我们想要打印数组中所有的值,直接打印数组的变量名就可以: 往数组添值: 栈方法.队列方法:  关于数组的排序:  数组的一些操作方法: 查找位置方法 迭代方法 归并方法 Date类型 RegExp类型 Function类型 三种表示法: 方法重载 函数内部属性(arguments 和 this) 基本包装类型 浏览器的内置对象 URI 编码方法 总结 我们在<

  • JavaScript基础语法与数据类型介绍

    JavaScript基础语法与数据类型介绍

    目录 一.JavaScript语法 1.区分大小写 2.标识符 3.注释 4.变量 二.JavaScript的数据类型 1.Undefined类型 2.Null类型 3.Boolean类型 4.Number 5.String类型 6.Object类型 三.typeof操作符 一.JavaScript语法 1.区分大小写 ECMAScript中的一切,包括变量.函数名和操作符都是区分大小写的.例如:text和Text表示两种不同的变量. 2.标识符 所谓标识符,就是指变量.函数.属性的名字,或者函

  • javascript基础知识讲解

    本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~. 学习目的 本文针对javascript基础薄弱的同学,可以加深对javascript的理解. 本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑 讲解内容如下: 1. 连等 2. i++ 3. 包装对象 4. 引用类型 5. && 与 || 讲解部分 1. 连等 小试牛刀 连等是常见的表达式,但是并不是所有情况都适合连等,连等只适用于字面量并不适用于引用类型. // 字面量连

  • javascript基础语法——全面理解变量和标识符

    javascript基础语法——全面理解变量和标识符

    关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性.实际上,变量是标识符的一种.本文将详细介绍变量和标识符 定义 标识符(Identifier)就是一个名字,用来对变量.函数.属性.参数进行命名,或者用做某些循环语句中的跳转位置的标记 //变量 var Identifier = 123; //属性 (new Object).Identifier = 'test'; //函数及参数 function IdentifierName(Identifie

随机推荐