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. VUE项目引入微信jssdk

    npm i -S weixin-js-sdkimport wx from 'weixin-js-sdk'

  2. (转)Shell全局变量、局部变量与特殊变量笔记总结

    Shell全局变量.局部变量与特殊变量笔记总结 原文:http://blog.csdn.net/apollon_krj/article/details/70148022 变量类型:全局变量(环境变量) ...

  3. 个人笔记——Android网络技术

    一.WebView 的用法 Android 提供WebView 的用法,可以在自己的应用程序里嵌入一个浏览器 webView.getSettings().setJavaScriptEnabled(tr ...

  4. Java面试题03-访问权限控制

    Java面试题03-访问权限控制 1. Java中的包主要是为了防止类文件命名冲突以及方便进行代码组织和管理,因此采用域名倒置的方式来进行命名: 2. Java解释器的运行过程:首先找到环境变量CLA ...

  5. gcc链接非标准(non-standard)命名库

    标准命名库: -lnamespace 标准链接库以lib开头, 并以so/a结尾. example gcc test.c -o test -L. -lhello 非标准命名库: -l:libname ...

  6. C# 定制特性

    一.初识特性 特性(attribute)是被指定给某一声明的一则附加的声明性信息. 设计类型的时候可以使用各种成员来描述该类型的信息,但有时候我们可能不太愿意将一些附加信息放到类的内部,因为这样,可能 ...

  7. 如何将git上的代码迁移到Coding上

    1.首先需要找到项目的.git文件 2..git文件下的config中的url修改成新的地址 3.打开.ssh文件夹 4.将文件下的.pub后缀的文件里面的内容复制到Coding平台的key设置里面即 ...

  8. SSO单点登录三种情况的实现方式详解（转）

    https://blog.csdn.net/ainuser/article/details/65631713

  9. html+css动态篇

    transition过渡 transform旋转 animation动画 一般是父div包含两个子div,一个写鼠标悬浮之前,一个写鼠标悬浮之后, 鼠标悬浮之后的div要写overflow:hidde ...

  10. Web前端面试指导(十二)：::before 和:before有什么区别？

    题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...