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. method reference

    import java.util.Arrays; import java.util.List; import java.util.function.Function; import java.util ...

  2. Android耗时操作

    No subscribers registered for event class com.test.MessageEvent import de.greenrobot.event.EventBus; ...

  3. git修改密码

    1.Windows10下更换Git用户名或密码 https://jingyan.baidu.com/article/642c9d3435a6e9644a46f732.html

  4. ansile 命令解释选项

    1, -a MODULE_ARGS --args=MODULE_ARGS 作用传递参数给模块使用 2, --ask-vault-pass 执行时询问vault的密码 3, -B SECONDS --b ...

  5. 向一个GitHub repository添加协作者

    第一步: 在协作者的机器(就是你的电脑啦)上创建一个ssh key (使用命令ssh-keygen) 第二步: 创建一个github账户 第三步: 把public-key添加到你的github用户账户 ...

  6. ztree框架使用问题汇总

    1.如何让用户只能点击页子节点 var setting = { callback: { beforeClick: zTreeBeforeClick } }; function zTreeBeforeC ...

  7. vim源码编译启用python

    坑:只指定with-python-config-dir没有指定enable-pythoninterp是没有用的 ./configure --enable-pythoninterp --with-pyt ...

  8. IntelliJ IDEA 使用 LiveEdit 插件实现实时可视化前端开发

    之前因为公司很多都是C#后台项目,所以一直用的Visual Studio开发.而在VS里会自带实时刷新功能,即:在IDE中修改的CSS代码会同步反映在页面上,而不用我们手动F5刷新. 先在因为在考虑做 ...

  9. 利用request、beautifulsoup、xml写多线程爬虫

    # -*- coding:UTF-8 -*- import requests,time from collections import OrderedDict import threading fro ...

  10. jQuery easyUI 的combogrid进行模糊匹配

    $(function(){ $('#search_hospitalName').combogrid({ mode : 'remote',//远程连接方式 //fitColumns:true,//自动大 ...