课堂笔记:HTML----------图片热点
HTML----------图片热点:
规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可完成跳转的效果。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中国地图</title>
</head> <body> <a href="http://baike.baidu.com/link?url=pFUZHpRx_gaoY_K7XFP5wPdPWkqyYt6nwuXU1kvE_TazAbCSZ5TlUd9FIdpzKFWQGqKKtIY9RfY3WwZOyqLBaK"><img src="../网页制作的图片/地图.jpg" usemap="ditu"/></a>
<map name="ditu"><!--中国地图--></h1> <area shape="circle" coords="149,140,43" href="http://baike.baidu.com/link?url=TyFAjlvhI7Y8r4DLLxk3NeKOkhzAbCwGoLIpeX53SCTlyNz9P8UYZrV-S4phg8A3J7udcrz-tSsc9HQxEnRvbHbbcSuw7luuRzPXW-bE7cO" title="点击乌鲁木齐" target="_blank"><!--地图中的乌鲁木齐 图片热点--> <area shape="circle" coords="177,324,30" href="http://baike.baidu.com/link?url=pFUZHpRx_gaoY_K7XFP5wPdPWkqyYt6nwuXU1kvE_TazAbCSZ5TlUd9FIdpzKFWQGqKKtIY9RfY3WwZOyqLBaK" title="点击拉萨" target="_blank"><!--地图中的拉萨 图片热点--> <area shape="circle" coords="265,249,30" href="http://baike.baidu.com/subview/3995/8429349.htm" title="点击西宁" target="_blank"><!--地图中的西宁 图片热点--> <area shape="circle" coords="301,324,30" href="http://baike.baidu.com/item/%E6%88%90%E9%83%BD/128473" title="点击成都" target="_blank"><!--地图中的成都 图片热点--> <area shape="circle" coords="408,368,30" href="http://baike.baidu.com/subview/7127/11314672.htm" title="点击长沙" target="_blank"><!--地图中的长沙 图片热点--> <area shape="circle" coords="388,179,21" href="http://baike.baidu.com/view/26335.htm" title="点击呼和浩特" target="_blank"><!--地图中的呼和浩特 图片热点--> </map><br> </body>
</html>
显示设计:

网页显示的结果:

课堂笔记:HTML----------图片热点的更多相关文章
- HTML基础(二)——表单,图片热点,网页划区和拼接
一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...
- HTML:图片热点 网页划区 表单
图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" u ...
- HTML静态网页 图片热点、框架、表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...
- HTML · 图片热点,网页划区,拼接,表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 网页的拼接: 在一个网络页面内,规划出多 ...
- HTML--表单,图片热点,网页划区和拼接
一.图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: <img src="/ usemap="longzhu"> ...
- html5 图片热点area,map的用法
今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形.圆形.三角形区域都可以进入其他网页! ...
- HTML--2图片热点,网页划区,拼接
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 网页的拼接: 在一个网络 ...
- 2、网页制作Dreamweaver(图片热点、frameset框架)
图片热点 1.方法: <img usemap="名字"> <map name="名字"> <area shape="r ...
- HTML图片热点、网页划区、拼接、表单
一.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 二.网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 三.网页的拼接: ...
随机推荐
- 文献综述七:基于SSM的网上商城的开发与设计
一.基本信息 标题:基于SSM的网上商城的开发与设计 时间:2018 出版源:Computer Knowledge and Technology 文件分类:对框架的研究 二.研究背景 为了解决现在电商 ...
- maven 引入本地 jar
$ 参考1 : https://www.cnblogs.com/lixuwu/p/5855031.html ! 注: 参考1中的第二种方法,作者并未实际尝试,我尝试了,虽然在eclipse 中编译不报 ...
- Apache Beam的目标
不多说,直接上干货! Apache Beam的目标 统一(UNIFIED) 基于单一的编程模型,能够实现批处理(Batch processing).流处理(Streaming Processing), ...
- Coursera 机器学习 第9章(上) Anomaly Detection 学习笔记
9 Anomaly Detection9.1 Density Estimation9.1.1 Problem Motivation异常检测(Density Estimation)是机器学习常见的应用, ...
- 线程中断方法interrupt() 与 cancel()
(一).关于interrupt() interrupt()并不直接中断线程,而是设定一个中断标识,然后由程序进行中断检查,确定是否中断. 1. sleep() & interr ...
- java实现截取6个汉字字母数字
项目中使用到需要截取6个字(12个字母或数字),解决方法如下: /** * * @方法名称:getWordCount * @内容摘要: <截取输入字符串 大于6个后显示...> * @pa ...
- SQL 表定时同步
1.创建存储过程 create proc [dbo].[sync_calendar] as truncate table dbo.CalendarEvents insert into Calendar ...
- 【Sql server: T-Sql 技术内幕 系列】之索引篇
本文系 T-Sql技术内幕系列读后感. 用过数据库的程序猿都知道,索引可以极大的优化sql语句的执行时间,但是您要问我,怎么减少的,我只能说:"抱歉,我也不太清楚." 带着这个疑惑 ...
- Scala 知识点掌握1
Scala知识点巩固 1.Scala简介 Scala是一门面向对象和面向函数的编程语言,是一门静态编程语言,如 Java Scala(变量类型在编译阶段确定):源码文件需要基于 JVM 运行的. 动态 ...
- XML深入了解(XML JavaSprint)
XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据. XMLHttpRequest 对象是开发者的梦想,因为您能够: 在不重新加载页面的情况下更新网页 在 ...