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. Masonry – 实现 Pinterest 模式的网格砌体布局

    Masonry 是一款 JavaScript 网格布局插件,可以实现类似 Pinterest 模式的砌体布局效果.通过把元素自动填充在垂直的空白区域,就像墙上堆砌的石头一样.这个库还可以作为 jQue ...

  2. React入门--------顶层API

    React.createClass 参数:config(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有render属性方法,该方法必须返回一个封闭的容器(容器内可以由 ...

  3. css小技巧，会不断更新的

    1.去除input记住密码后自动填充表单的黄色背景 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }/ ...

  4. 使用three.js创建3D机房模型-分享一

    序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...

  5. go语言和资料

    C/C++编程相关的复杂性,特别是大一点的工程的维护,如果人员较多,规范等都是较大的负担,最近正在关注go这么语言, 准备对于并发和系统级的开发引入. Go官网 http://golang.org h ...

  6. 【代码笔记】iOS-首页3张图片变化

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  7. 【代码笔记】iOS-3个section，每个都有header.

    一,效果图: 二,工程目录. 三,代码 RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  8. IOS开发之自动布局--VFL语言

    前言:VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言.对于纯代码发烧友,值得我们去学习和了解哦. 1.什么是VFL语言 VFL全称是Visual Format Language,翻 ...

  9. IOS开发之UI布局

    前言:本篇随笔会经常更新,随着本人对布局的深入学习,会不断补充新的知识.新的使用技巧.新的认识等等. 1.Autoresizing(在代码中使用) 先简单的看看下面的代码,以及左边运行出来的效果,然后 ...

  10. phonegap学习笔记

    [windows下安装] 1 先安装node.js: http://nodejs.org/ 2 CMD下运行: C:\> npm install -g phonegap [创建项目] CMD下运 ...