HTML-图片热点、网页内嵌、网页拼接、快速切图
图片热点
规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果。与图片链接不同,热点是图片上的某一个区域或多个区域。
我们用魔兽世界图片来做一个图片热点,点击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-图片热点、网页内嵌、网页拼接、快速切图的更多相关文章
- 关于Unity程序在IOS和Android上显示内嵌网页的方式
近期因为有须要在Unity程序执行在ios或android手机上显示内嵌网页.所以遍从网上搜集了一下相关的资料.整理例如以下: UnityWebCore 从搜索中先看到了这个.下载下来了以后发现这个的 ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- iOS 之 内嵌网页
现在iOS 有两种内嵌网页的技术,一种是UIWebView,而另一种WKWebView则是iOS8之后出现的技术. iOS 之 UIWebView WKWebView
- [小程序开发] 微信小程序内嵌网页web-view开发教程
为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...
- django2 用iframe标签完成 网页内嵌播放b站视频功能
前言: 给自己的网站中加入视频资源,有两种方法,一种是用iframe标签引用外站资源,另一种则使用video标签,获取站内资源进行视频播放.其中前者顾名思义,是将视频资源上传到视频网站中,然后通过引用 ...
- Unity中内嵌网页插件UniWebView使用总结
目前有三种方式可以实现在Unity工程中实现内嵌网页的功能: 1. UnityWebCore:只支持Windows平台,调用浏览器内核,将网页渲染到mesh,作为gameObject. 2. Un ...
- 微信小程序内嵌网页能力开放 小程序支持内嵌网页文档说明
为了方便开发者灵活配置微信小程序,张小龙现在开放了小程序的内嵌网页功能,这是一个非常大的惊喜啊,以后意味着你只要开放一个手机端网站,就可以制作一个小程序了哦.操作方法1.开发者登录微信小程序后台,选择 ...
- Unity中内嵌网页插件UniWebView
一.常见Unity中内嵌网页实现方式: 1.UnityWebCore只支持windows 2.Unity-Webview支持Android,IOS 3.UniWebView支持mac os,Andro ...
- WPF应用程序内嵌网页
原文:WPF应用程序内嵌网页 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/shaynerain/article/details/78160984 WPF ...
随机推荐
- 关于ubuntu的sources.list总结
一.作用 文件/etc/apt/sources.list是一个普通可编辑的文本文件,保存了ubuntu软件更新的源服务器的地址.和sources.list功能一样的是/etc/apt/sources. ...
- sql server 修改表结构语法大全
1.增加字段 ) 2.删除字段 alter table table_name drop column column_name 3.修改字段类型 alter table table_name alter ...
- iOS 中 const static extern 关键字总结
在看一些高手所写的代码时,总是可以看到我们小白平常不用的关键字,一次,两次,三次,不能总是不明不白,现在总结一下日常开发中常用的关键字的作用: 关键字const/static/extern的释义和用法 ...
- swift 随机生成背景颜色
swift是一门新语言,相关的文档资料现在基本上还不是很完整.在尝试开发过程中,走了不少弯路.在这里记录一下自己的”路“,希望以后能少走弯路. 生成随机背景颜色使用的语法和C#或者JAVA基本一致. ...
- Html代码保存为Pdf文件
前段时间Insus.NET有实现了<上传Text文档并转换为PDF>http://www.cnblogs.com/insus/p/4313092.html 和<截取视图某一段另存为部 ...
- Java并发编程实战(使用synchronized实现同步方法)
本文介绍java最基本的同步方式,即使用synchronized关键字来控制一个方法的并发访问,如果一个对象已用synchronized关键字声明,那么只有一个执行线程允许去访问它,其它试图访问这个对 ...
- 2015-2016-2 《Java程序设计》 游戏化
2015-2016-2 <Java程序设计> 游戏化 实践「<程序设计教学法--以Java程序设计为例>」中的「游戏化(Gamification)理论」,根据 2015-201 ...
- DOM Document节点类型详解
在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...
- SQLServer(MSSQL)、MySQL、SQLite、Access相互迁移转换工具 DB2DB v1.0
最近公司有一个项目,需要把原来的系统从 MSSQL 升迁到阿里云RDS(MySQL)上面.为便于测试,所以需要把原来系统的所有数据表以及测试数据转换到 MySQL 上面.在百度上找了很多方法,有通过微 ...
- VS条件断点的一个坑
今天早上要调试一个方法,所以在方法的入口处也就是’{’打了一个条件断点,可是随后就发现对这个方法的调用都无法获得正确的结果了,不管传递什么参数,方法的返回值都一样,而且这个返回值与输入的参数完全无关, ...