图片热点

规划出图片上的一个区域，可以做出超链接，直接点击图片区域就可以完成跳转的效果。与图片链接不同，热点是图片上的某一个区域或多个区域。

我们用魔兽世界图片来做一个图片热点，点击logo、区域和不同人物会连接到对应种族介绍：

在网页中打开图片，指向特定的区域将显示连接提示，点击后连接到指定网址

<body>

<table align="center">

<tr>

  <td>

<img src="魔兽世界1.jpg" width="900" usemap="wow" />

<map name="wow" >

<area shape="rect" coords="277,18,608,108" href="https://www.wowchina.com/zh-cn/" />

<area shape="poly" coords="816,422,790,441,781,469,767,504,877,508,861,483,844,463,839,438,831,427" href="https://www.wowchina.com/zh-cn/game/races/gnome" target="_blank" title="魔兽世界-侏儒" />

<area shape="poly" coords="786,350,824,300,835,247,864,248,895,256,889,299,894,342,885,369,896,433,891,492,844,436,861,393,863,366,817,354" href="https://www.wowchina.com/zh-cn/game/races/night-elf" target="_blank" title="魔兽世界-暗夜精灵" />

<area shape="poly" coords="864,368,773,343,790,320,730,304,727,338,687,336,664,353,662,368,672,388,665,412,653,449,662,503,763,505,790,429,847,417" href="https://www.wowchina.com/zh-cn/game/races/dwarf" target="_blank" title="魔兽世界-矮人" />

<area shape="poly" coords="639,142,691,165,690,218,718,263,716,337,661,334,595,272,595,250,588,205,608,160" href="#https://www.wowchina.com/zh-cn/game/races/draenei" target="_blank" title="魔兽世界-德莱尼" />

<area shape="poly" coords="491,294,528,285,548,245,592,244,593,274,664,340,662,370,671,387,655,447,662,504,504,506,524,403,498,389,477,353" href="#https://www.wowchina.com/zh-cn/game/races/human" target="_blank" title="魔兽世界-人类" />

<area shape="circle" coords="240,345,235" href="https://www.wowchina.com/zh-cn/game/races" target="_blank" title="魔兽世界种族" />

</map>

</td></tr>

</table>

</body>

一、先引用图片并设置宽度<img src="" width="" />

二、设置<map>，并name命名

三、在<img>中引用name名 将<img>与<map>联系起来

四、设置连接区域<area>

1、shape 连接区域形状 rect矩形 circle圆形 poly多边形

2、coords 设置连接区域的坐标 矩形为左上角坐标及右下角坐标 圆形为圆点坐标及半径长度  坐标是图片的左上角计算

3、href 设置连接网址  _blank 新网页中打开

网页内嵌

在一个网页里，规划处一个区域来展示另一个网页的内容

我们在上面的网页基础上嵌入百度主页

<tr><td>

<iframe src="http://www.baidu.com" width="" height=""></iframe>

</td></tr>

<iframe></iframe> 为网页内嵌标签  设置区域宽与高来指定区域

网页拼接

在一个网络页面内，规划出多个页面窗口，以表格拼接的形式展现出来

快速切图

用于做一个简单的网页效果图

步骤一：PS打开一个图片，选取“切刀”工具，对想要进行超链接的区域进行切割处理，可以同时切多处区域

步骤二：“文件”中选择“存储为Web所用格式...”，存储时格式选择“HTML 和图像”

步骤三：在DW中打开保存的网页，并设置每个区域连接的网址，即可完成一个简单的网页效果图

HTML-图片热点、网页内嵌、网页拼接、快速切图的更多相关文章

  1. 关于Unity程序在IOS和Android上显示内嵌网页的方式

    近期因为有须要在Unity程序执行在ios或android手机上显示内嵌网页.所以遍从网上搜集了一下相关的资料.整理例如以下: UnityWebCore 从搜索中先看到了这个.下载下来了以后发现这个的 ...

  2. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  3. iOS 之 内嵌网页

    现在iOS 有两种内嵌网页的技术,一种是UIWebView,而另一种WKWebView则是iOS8之后出现的技术. iOS 之 UIWebView WKWebView

  4. [小程序开发] 微信小程序内嵌网页web-view开发教程

    为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...

  5. django2 用iframe标签完成 网页内嵌播放b站视频功能

    前言: 给自己的网站中加入视频资源,有两种方法,一种是用iframe标签引用外站资源,另一种则使用video标签,获取站内资源进行视频播放.其中前者顾名思义,是将视频资源上传到视频网站中,然后通过引用 ...

  6. Unity中内嵌网页插件UniWebView使用总结

    目前有三种方式可以实现在Unity工程中实现内嵌网页的功能: 1.  UnityWebCore:只支持Windows平台,调用浏览器内核,将网页渲染到mesh,作为gameObject. 2.  Un ...

  7. 微信小程序内嵌网页能力开放 小程序支持内嵌网页文档说明

    为了方便开发者灵活配置微信小程序,张小龙现在开放了小程序的内嵌网页功能,这是一个非常大的惊喜啊,以后意味着你只要开放一个手机端网站,就可以制作一个小程序了哦.操作方法1.开发者登录微信小程序后台,选择 ...

  8. Unity中内嵌网页插件UniWebView

    一.常见Unity中内嵌网页实现方式: 1.UnityWebCore只支持windows 2.Unity-Webview支持Android,IOS 3.UniWebView支持mac os,Andro ...

  9. WPF应用程序内嵌网页

    原文:WPF应用程序内嵌网页 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/shaynerain/article/details/78160984 WPF ...

随机推荐

  1. 任务调度开源框架Quartz动态添加、修改和删除定时任务

    Quartz 是个开源的作业调度框架,为在 Java 应用程序中进行作业调度提供了简单却强大的机制.Quartz框架包含了调度器监听.作业和触发器监听.你可以配置作业和触发器监听为全局监听或者是特定于 ...

  2. [No000024]鲜为人知的编程真相

    当程序员的经历让我知道了一些关于软件编程的事情.下面的这些事情可能会让朋友们对软件开发感到惊讶: 一个程序员用在写程序上的时间大概占他的工作时间的10-20% ,大部分的程序员每天大约能写出10-12 ...

  3. luogu[1140]相似基因

    题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了4种核苷酸,简记作A,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类基因工作组的任务中,生物学家研究 ...

  4. 协议的分用以及wireshark对协议的识别

    在TCP/IP详解一书中谈到了协议的分用,书中的图1-8如上.图1-8可以很好地解释在互联网的分层结构中,底层的协议头是如何承载上层的不同的协议的.对于链路层而言,以太网首部中有不同帧类型用于表示以太 ...

  5. webapp开发需要注意的浏览器内核知识

    Web App:1.开发成本较低使用web开发技术就可以轻松的完成web app的开发2.升级较简单升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉3.维护比较轻松和一般的web一样,维护比 ...

  6. Java核心技术点之注解

    本博文是对Java中注解相关知识点的简单总结,若有叙述不清晰或是不准确的地方,希望大家可以指正,谢谢大家:) 一.什么是注解 我们大家都知道Java代码中使用注释是为了向以后阅读这份代码的人解释说明一 ...

  7. IIS中ASP.NET安全配置

    1.禁止web中的DELETE.OPTIONS.PUT.HEAD和TRACE HTTP方法 请求方法是请求一定的Web页面的程序或用于特定的URL.可选用下列几种:GET: 请求指定的页面信息,并返回 ...

  8. win7下给右键菜单添加启动cmd命令

    win7下给右键菜单添加启动cmd命令 (2013-07-20 19:20:56) 转载▼ 标签: it 右键 cmd 分类: 小软件操作技巧     最近编辑器在用windows下的gvim,但进入 ...

  9. 如何优化 FineUI 控件库的性能，减少 80% 的数据上传量！

    在开始正文之前,请帮忙为当前排名前 10 唯一的 .Net 开源软件 FineUI 投一票: 投票地址: https://code.csdn.net/2013OSSurvey/gitop/codevo ...

  10. Python2.2-原理之类型和运算

    此节来自于<Python学习手册第四版>第二部分 一.Python对象类型(第4章) 1. Python可以分解成模块.语句.表达式以及对象:1.程序由模块构成:2.模块包含语句:3.语句 ...