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. c语言3种方式实现参数传递

    学习计算机已经两年了,参数传递已经成功恶心了我两年,今天在写二叉树遍历的时候成功对此忍无可忍.本文是在阅读https://blog.csdn.net/u013097971/article/detail ...

  2. 使用jenkins自动化构建android和ios应用

    背景 随着业务需求的演进,工程的复杂度会逐渐增加,自动化的践行日益强烈.事实上,工程的自动化一直是我们努力的目标,能有效提高我们的生产效率,最大化减少人为出错的概率,实现一些复杂的业务需求应变.场景如 ...

  3. 6.ConcurrentHashMap jdk1.7

    6.1 hash算法 就是把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可能会散列成相同的输出,所 ...

  4. jdk监控tomcat

    一, tomcat配置文件 在tomcat的配置文件中添加被监控的项 #在tomcat配置文件中开启监控功能 vim /application/tomcat/bin/catalina.sh +97 C ...

  5. C#中if和#if区别

    if的作用是程序流控制,会直接编译.执行.#if是对编译器的指令,其作用是告诉编译器,有些语句行希望在条件满足时才编译. --------------------------------------- ...

  6. OpenGL进阶之Instancing

    Instancing Instancing绘制我想很多童鞋都不陌生,这个技术主要用来快速渲染大量相同的几何体,可以大大提高绘制效率.每个instance在shader中都有一个独一无二的索引,可以用来 ...

  7. 简介SWT Jface

    可以使用标准窗口小部件工具箱(Standard Widget Toolkit,SWT)和 JFace 库来开发用于 Eclipse 环境的图形用户界面,而且还可以将它们用于开发单独的 GUI 本机应用 ...

  8. 小型Basic编译器问题

    # include <stdio.h> # include <string.h> # include <ctype.h> # include <stdlib. ...

  9. PowerDesigner从SqlServer数据库导入数据模型

    Powerdesigner 从数据库导入数据 第一步, 打开 powerdesigner, 在菜单选择 [File] 选项, 然后在弹出的下拉单中选择 [Reverse Engineer]选项,再选择 ...

  10. linux shell内置判断

    内置判断,成功的时候返回0,不成功返回非零 test  判断表达式 [ 判断表达式 ]       注意前后必须留空格哦 数值运算 -eq   等于 -ne   不等于 -gt     大于 -ge ...