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. windows下dubbo-admin的安装

    本来以为十分钟就能搞定的东西结果搞了一个小时,也是菜到抠脚,赶紧记录一下. 下载dubbo源码,下载地址:https://download.csdn.net/download/huangzhang_/ ...

  2. 踩坑--http返回码之302状态码

    项目介绍:springboot+shiro+maven 业务需求:拦截一切不登录的盗链URL,除了问卷调查,可以给任意用户填写和提交意外. 问题重现:表单提交过程中返回302状态码,我就觉得很奇怪.在 ...

  3. 图解 I帧，B帧以及P帧

    I‑frame (Intra-coded picture): 即完整的一张图片 P‑frame (Predicted picture): 与前面一张图片的区别的区域 B‑frame (Bidirect ...

  4. 如何在ThinkPHP中开启调试模式

    1.为什么使用调试模式? 因为调试会在我们的模板页的最后增加一些trace信息. 2.什么是trace信息? 是ThinkPHP为我们提供好的一些包含了系统运行时间.占用内存.加载时间.请求的协议.. ...

  5. React.js 小书 Lesson10 - 组件的 state 和 setState

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson10 转载请注明出处,保留原文链接和作者信息. state 我们前面提到过,一个组件的显示形态 ...

  6. jQuery 菜单小练习(实现点击和移动鼠标效果)

    这个代码的练习是点击事件后 如何用jQuery联动的方式找到相关标签 实现的结果是点击菜单一或者菜单二等 会出现相关菜品,并隐藏其他菜品.鼠标移动才菜品上会在右侧框内出现相关菜品的价格.实现特殊的效果 ...

  7. IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

  8. ASP.NET安全[开发ASP.NET MVC应用程序时值得注意的安全问题](转)

    概述 安全在web领域是一个永远都不会过时的话题,今天我们就来看一看一些在开发ASP.NET MVC应用程序时一些值得我们注意的安全问题.本篇主要包括以下几个内容 : 认证 授权 XSS跨站脚本攻击 ...

  9. python学习（七）--豆瓣爬取电影名，评分以及演员

    import requestsimport re #爬取豆瓣电影排名pageNum = int(input("要查看第几页电影分数:"))#已知豆瓣默认每页展示20条#url= & ...

  10. python学习（三）--跟着例子写的贴吧网页爬取

    from urllib import requestimport urllib #爬贴吧网页文件到本地.首先在本地打开百度贴吧 搜索 java吧#第一页的内容是:http://tieba.baidu. ...