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----------图片热点的更多相关文章

  1. HTML基础(二)——表单,图片热点,网页划区和拼接

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...

  2. HTML:图片热点 网页划区 表单

    图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" u ...

  3. HTML静态网页 图片热点、框架、表单

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...

  4. HTML · 图片热点,网页划区,拼接,表单

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 网页的拼接: 在一个网络页面内,规划出多 ...

  5. HTML--表单,图片热点,网页划区和拼接

    一.图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: <img src="/ usemap="longzhu"> ...

  6. html5 图片热点area,map的用法

    今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形.圆形.三角形区域都可以进入其他网页! ...

  7. HTML--2图片热点,网页划区,拼接

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 网页的拼接: 在一个网络 ...

  8. 2、网页制作Dreamweaver(图片热点、frameset框架)

    图片热点 1.方法: <img  usemap="名字"> <map name="名字"> <area shape="r ...

  9. HTML图片热点、网页划区、拼接、表单

    一.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 二.网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 三.网页的拼接: ...

随机推荐

  1. 关于工具类静态方法调用@Autowired注入的service类问题

    @Component //此处注解不能省却(0) 1 public class NtClient { 2 /** 3 * 日志 4 */ 5 private static String clazzNa ...

  2. js正则表达式基本语法

    正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束. 例子如下: "^The":表示所有以"The"开始的字符串(&q ...

  3. python 爬虫系列07-天气爬虫

    看天气 import requests from bs4 import BeautifulSoup ALL_DATA = [] def parse_page(url): headers = { 'Us ...

  4. AWS and OpenStack

    AWS OpenStack EC2 Nova EBS Cinder EFS Manila S3 Swift Storage Gateway 本地上云 ClondFront 内容发布服务 VPC Neu ...

  5. 【shell】《shell学习指南》读书笔记

    一.使用shell脚本 优点:脚本语言能够轻易处理文件与目录之间的对象,如把文件从所有目录拷贝到另一个目录 缺点:效率不如编译型语言 二.简单的脚本 1.查看现在系统有谁登录 $who 2.算出行数 ...

  6. java基础之登录程序

    注:此版本仅供学习使用! Login.java import java.awt.Font; import java.awt.event.*; import java.sql.*; import jav ...

  7. 初学C#——选号器

    private void Form1_Load(object sender, EventArgs e) { Random x = new Random(); ); //生成一个大于等于0,小于100之 ...

  8. ADO.NET教程(1)初识ado.net

    ADO.NET简介 ADO.NET使用到的类 需掌握的方法和属性 ado.net连接实例 ADO.NET的名称起源于ADO(ActiveX Data Objects),是一个COM组件库,用于在以往的 ...

  9. CMS API Overview - 翻译

    source: http://activemq.apache.org/cms/cms-api-overview.html 1. CMS是啥? C++版本的API,用于收发消息(JMS). 如果您已熟悉 ...

  10. Cannot execute request on any known server

    1.com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectException: Connection refused: c ...