zoukankan      html  css  js  c++  java
  • 课堂笔记:HTML----------图片热点

    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>

    显示设计:

    网页显示的结果:

  • 相关阅读:
    软件设计7个原则
    vue.js 样式绑定 font-size 问题
    实例理解scala 隐式转换(隐式值,隐式方法,隐式类)
    著名端口整理(常用服务的默认端总结)
    .NET Core Web API 实现大文件分片上传
    ngnix反向代理tomcat,ssl证书配置及自定义错误页面
    微信登录闪退
    gradle如何配置阿里云的中央仓库
    HashMap底层实现和原理
    关于Java中String类的hashCode方法
  • 原文地址:https://www.cnblogs.com/yuyu1993/p/5456557.html
Copyright © 2011-2022 走看看