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. Java2_java入门时的一些基本概念的理解(j2ee,j2se,j2me,jdk,sdk,jre,jvm,跨平台)

    什么是SDK呢? Software Develop Kit的简称,顾名思义就是软件开发包.软件开发商实现底层模块,并对其进行类库封装,配置成高级别的开发环境,为程序员上层的程序开发提供支持.譬如Goo ...

  2. 送给我的朋友——Cry on my shoulder

    If the hero never comes to you如果你的真命天子仍未来到 If you need someone you"re feeling blue如果你情绪低落需要有人陪伴 ...

  3. 深入源码分析使用jQuery连续发起jsonp请求失败的原因

    jQuery的 jsonp 大家应该是十分熟悉了.曾遇到过这样的需求1.希望请求几个相似的内容添加到页面2.请求的内容一定时间内是固定不变的,希望做个缓存. 于是脑子一拍写下了类似这样的代码 for( ...

  4. Phonegap之ios对iPhone6和Plus的闪屏适配 -- xmTan

    故事的发生起于,由于老板强烈要求app在iPhone6和5有一样的工具栏,然后前端妹子用@media为iPhone6和Plus做了样式适配.然后问题来了,竟然奇葩的发现@media样式只对iPhone ...

  5. iOS开发之百度地图的集成——地图标注&POI检索

    本篇分为两部分: 一.地图标注 第一步:首先创建 BMKMapView 视图 第二步:在视图完全显示出来后设置,并实现代理方法 第三步:运行程序,此时大头针效果可以正常显示 二.POI检索 第一步:延 ...

  6. OS开发UI篇—使用UItableview完成一个简单的QQ好友列表

    本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableVi ...

  7. iOS 学习资源

    这份学习资料是为 iOS 初学者所准备的, 旨在帮助 iOS 初学者们快速找到适合自己的学习资料, 节省他们搜索资料的时间, 使他们更好的规划好自己的 iOS 学习路线, 更快的入门, 更准确的定位的 ...

  8. The JSP specification requires that an attribute name is preceded by whitespace

    一个jsp页面在本地运行一点问题没有,发布到服务器就报错了: The JSP specification requires that an attribute name is preceded by ...

  9. asp.net mvc 应用Bundle（捆绑和微小）压缩技术 启用 BundleConfig 配置web.config

    从MVC4开始,我们就发现,项目中对Global.asax进行了优化,将原来在MVC3中使用的代码移到了 [App_Start]文件夹下,而Global.asax只负责初始化.其中的BundleCon ...

  10. Jenkins用户配置(安装好jenkins后，怎么配置用户管理、权限管理)

    直奔主题 安装完成后,先开启用户配置 1. 系统管理-->配置权限 2.  启用安全,并选中"安全矩阵" 如上,搞定: 可以按用户去设置各项目的操作权限了: 轻松实现,jen ...