课堂笔记:HTML----------图片热点
2024-08-27 17:38:31
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>
显示设计:
网页显示的结果:
最新文章
- SSIS Parameter用法
- Pyqt 动态的添加控件
- 开源top100
- JSP或HTML命名规范
- mybatis0212 mybatis逆向工程 (MyBatis Generator)
- BroadcastReceiver 案例
- [翻译]如何用YII写出安全的WEB应用
- Bash中单引号和双引号的区别
- javascript 中的类型
- localStorage,sessionStorage和cookie的区别
- java 反射获取方法返回值类型
- PHP/Post 提交请求获取json数据,并转化为所需要的数组
- python_11 装饰器,闭包
- 感悟优化——Netty对JDK缓冲区的内存池零拷贝改造
- Linux之清理linux内存cache
- Linux将yum源设置为阿里云的镜像源
- python day21 ——面向对像-反射 getattr,内置方法
- 卸载Myeclipse10.5 报错“an error has occured.See the log file ...Uninstaller\...”
- Ext4 ReiserFS Btrfs 等7种文件系统性能比拼
- css 解决fixed 布局下不能滚动的问题