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/show4cnblogs/img-map.html

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

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

  1. 【HTML】嵌入图像

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

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

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

  3. 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异

    标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...

  4. html5--1.9 img元素嵌入图片

    html5--1.9 img元素嵌入图片 学习要点: img元素嵌入图片学习一个新属性:title 1.img的属性 1.src:必要属性,制定图片来源的路径; 2.alt属性:当图片无法显示时的替代 ...

  5. css样式（二）（伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 ）

    一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一 ...

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

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

  7. 【HTML 元素】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式

    1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...

  8. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

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

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

随机推荐

  1. php 内核变量 引用计数器写时复制

    写时复制,是一个解决内存复用的方法,就是你在php语言层,如$d=$c=$b=$a='value';把$a赋给另一个或多个变量,这时这个变量都只占用一个内存块,当其中一个变量值改变时,才会开辟另一个内 ...

  2. [bzoj1433][ZJOI2009]假期的宿舍——二分图

    题目大意 传送门 题解 显然是二分图匹配. 用一些方法建图就好了. 要注意的是: 本题有多组数据!!! 初始化一定要注意!!! 代码 #include <bits/stdc++.h> us ...

  3. 杭电oj2032、2040、2042、2054、2055

    2032  杨辉三角 #include <stdio.h> int main(){ ][],i,j,n; while(~scanf("%d",&n)){ ;i& ...

  4. Android Handler使用

    1. 介绍 Handler允许向关联线程的消息队列(MessageQueue)发送消息(Message)和可执行对象(Runnable).每个Handler实例都与某个线程(即创建该Handler的线 ...

  5. windows 修改xhsell安全加密配置

    由于xhsell旧版的与新版的有差别,导致新版的不能用旧版的xsh文件 1.将xshell升级到最新版本2.安装sed与grep到C:\Program Files (x86)\GnuWin323.将b ...

  6. 【linux高级程序设计】（第十五章）UDP网络编程应用 2

    UDP广播通信 单播:一对一,TCP和UDP均可完成 广播:只能UDP完成.广播时发送方只发送一个数据包,但是网络上的交换机默认转发广播数据包到所有端口.路由器默认不转发任何广播数据包.故广播在局域网 ...

  7. python的递归算法学习（3）：汉诺塔递归算法

    汉诺塔问题是递归函数的经典应用,它来自一个古老传说:在世界刚被创建的时候有一座钻石宝塔A,其上有64个金蝶.所有碟子按从大到小的次序从塔底堆放至塔顶.紧挨着这座塔有另外两个钻石宝塔B和C.从世界创始之 ...

  8. hdu 5102(巧妙的搜索)

    The K-th Distance Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  9. Javascript"怪异"现象

    下面给大家看个例子,这个毫无疑问打印出10 var a = 10; function test() { console.log(a); } test(); 下面我改动一下 var a = 10; fu ...

  10. 2018年最重要的HTML5开发手册，传播正能量

    今天给大家推荐这个HTML5开发手册,希望能帮助正在学习web前端的人,鄙人也是刚学习前端没多久,借助于一点资讯平台能够结识更多前端大牛,这是我的web前端/HTML5/javscript技术学习群: ...