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>

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

服务器端分区响应图通常意味着服务器会根据用户在图像上点击区域的不同做出有差别的反应，比如返回不同的响应信息。如果省略了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>

点击链接查看效果：http://yexiaochao.github.io/demo/img-map.html

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

【HTML】嵌入图像的更多相关文章

  1. 【HTML 元素】嵌入图像

    img元素允许我们在HTML文档里嵌入图像. 要嵌入一张图像需要使用src和alt属性,代码如下: <img src="../img/example/img-map.jpg" ...

  2. 我的Android进阶之旅------>Android嵌入图像InsetDrawable的用法

    面试题:为一个充满整个屏幕的LinearLayout布局指定背景图,是否可以让背景图不充满屏幕?请用代码描述实现过程. 解决此题,可以使用嵌入(Inset)图像资源来指定图像,然后像使用普通图像资源一 ...

  3. Android-用你自己的自定义图像资源（2）

    Android-自己定义图像资源的使用 2014年4月29日   上一篇博客.介绍前面几种图像资源的使用,本篇博客把剩下的所有介绍完: 普通图像资源 XML图像资源 Nine-patch图像资源 XM ...

  4. 第六十五，html嵌入元素

    html嵌入元素 学习要点:     1.嵌入元素总汇     2.嵌入元素解析     本章主要探讨HTML5中嵌入元素,嵌入元素主要功能是把外部的一些资源插入到HTML中.   一．嵌入元素总汇 ...

  5. Web开发——HTML基础（图像、音频和视频内容）

    参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...

  6. Android资源之图像资源（状态图像资源）

    在上一篇博文中.我主要解说了XML图像资源中的图层资源,在此图像资源博文中我会给大家陆续解说XMl图像资源的图像状态资源.图像级别资源.淡入淡出资源.嵌入图像资源.剪切图像资源和外形资源. 1.图像状 ...

  7. conversations.im

    最后在即时消息  https://conversations.im/ https://github.com/chrisballinger/ 对话是Android 4.0的Jabber / XMPP客户 ...

  8. test markdown

    Markdown和Haroopad介绍文档 [TOC "float:right"] 什么是Markdown Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John ...

  9. HTML初步入门

    标签元素 标签介绍 html元素包括一个或一对标签定义的包含范围.而标签就是由两个字符串"<"和">"号组成,标签包括开始标签"<& ...

随机推荐

  1. [deviceone开发]-一个很炫的手势动画示例

    一.简介 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手 ...

  2. javascript中this关键字详解

    不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:th ...

  3. Git正确的协作方式（很简单）

    最近部门有人书写了一篇很好的Git协作方式,操作也简单,分支能以保持一条干净的线进行协作开发.这里做个笔记,方便之后查看. PS:本文非原创. 原则 不过分相信自己,自己的修改,可能影响所有人 不过分 ...

  4. SAP (ABAP) 常用的数学函数

    Function func Return value abs Absolute value of the argument arg (绝对值) sign Plus/minus sign of the ...

  5. MyEclipse 2015免费在线公开课，2月5日开讲

    MyEclipse 2015免费在线公开课,2月5日开讲,由MyEclipse官方高级PM Brian Fernandes 主讲. 主讲内容: 更好地支持javascript和技术模块 全新的REST ...

  6. Android中的Interpolator

    Android中的Interpolator Interpolator用于动画中的时间插值,其作用就是把0到1的浮点值变化映射到另一个浮点值变化. 本文列出Android API提供的Interpola ...

  7. [其他]Ubuntu安装genymotion后unable to load VirtualBox engine

    问题: Ubuntu安装genymotion后unable to load VirtualBox engine 解决办法: 如果没有安装VirtualBox,要先安装VirtualBox. 安装Vir ...

  8. Android 手机卫士--弹出对话框

    在<Android 手机卫士--解析json与消息机制发送不同类型消息>一文中,消息机制发送不同类型的信息还没有完全实现,在出现异常的时候,应该弹出吐司提示异常,代码如下: private ...

  9. 你真的了解UITextField吗？

    一:首先查看一下关于UITextField的定义 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITextField : UIControl <UITextIn ...

  10. CoreAnimation方法汇总

    使用CoreAnimation一般分为三个部分:1.创建执行动画的CALayer 2.创建动画 3.CALayer 添加Animation CoreAnimation是以锚点为基础. CoreAnim ...