`
hudeyong926
  • 浏览: 2018686 次
  • 来自: 武汉
社区版块
存档分类
最新评论

404 img标签usemap,一个图片中添加多个链接

 
阅读更多

先看一下404页面,http://blog.51yip.com/404.html 这里面主要就是一个404图片,代码如下

<div style="margin: 10px; text-align: center;">
     <img src="test404_files/06.png" usemap="#Map" alt="HTTP 404,file not found"
     border="0"  height="422" width="450">
     <map name="Map" id="Map">
        <area shape="rect" coords="64,340,123,365" href="javascript:history.back();">
        <area shape="rect" coords="164,340,205,365" href="http://blog.51yip.com">
     </map>
</div>

解释:
usemap="#Map"调用一个name='Map'的标签
<map name="Map" id="Map"> html标签
一个<area>对应图片中的一块
shape="rect" 链接的形状,rect是rectangle(距形)英文单词的缩写

coords="64,340,123,365"距形链接坐标,这里的coords是coordinates(坐标)英文单词的缩写。

64,340,123,365这四个数字分别是链接距形相对于图片的左边,上边,右边,下边的位置。

64就是链接距形左边距大图片最左边的距离,其他数字也一样

分享到:
评论

相关推荐

    用CSS中的map标签制作单图多区域点击的示例

     img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...

    图像的影像地图超链接(热点区域),map标签浅谈

    在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。 这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。

    用基于栅格数据结构的USEMAP软件包制作多因素叠加专题图.pdf

    #资源达人分享计划#

    一张图片分割,用input框形成按钮

    &lt;img &gt;/images/dl.gif" width="81" height="22" border="0" usemap="#Map"&gt; 上面的图片在&lt;body&gt;中 而下面这句放入&lt;body&gt;外 ,3,36,19" href="#"&gt; ,3,78,18" href="#"&gt; &lt;/map&gt;

    Mapify:使用jQuery,SVG和CSS3的响应式和可样式化的图像地图

    $ ( "img[usemap]" ) . mapify ( ) ; 约夏克布丁 $ ( "img[usemap]" ) . mapify ( { popOver : { content : function ( zone ) { return "&lt;strong&gt;" + zone . attr ( "data-title" ) + "&lt;/strong&gt;" + ...

    IMG中UserMap的使用示例

    usemap是标签的一个属性,用作指明所使用的图像地图名,接下来为大家介绍下UserMap的使用方法,感兴趣的朋友可以参考下

    timezonepicker:一个基于jQuery和ImageMap的时区选择器

    时区选择器一个基于jQuery和ImageMap的时区选择器。 该库仅适用于从生成的预构建图像映射。特征实现简单,占用空间小(160KB,压缩后40KB)。 包括440多个可点击区域。 HTML5地理位置来标识时区。 岛屿包括填充物,...

    Warcraft3_UseMap01:라이브러리작성중

    Warcraft3_UseMap01:라이브러리작성중

    兰理工网页作业之个人简历制作

    &lt;img src="img/机器猫.png" usemap="map" width="%" height="%"&gt; ,50,30" href="Introduce.html" title="这是机器猫的左眼睛" target="_blank"&gt; ,50,40" href="Introduce.html" title="这是机器猫的右眼睛"&gt; ...

    JFreeChart双Y轴折线图实例,可以直接运行

    &lt;img src="&lt;%= graphURL %&gt;" width="600" height="400" border="0" usemap="#&lt;%= filename %&gt;"&gt; 记得在每次调用saveChartAsPNG 方法前都要 session.removeAttribute("JFreeChart_Deleter"); 用户退出系统也记得...

    react-maps:围绕Leaflet的ReactJS

    React图 与传单React松散实现的程序包。 与现有的相比,我们要在此仓库中设置不同的内容...链接到现有项目 首先构建软件包: npm run build然后只需在此npm link中执行npm link ,然后在您要在其中实现此软件包的npm l

    网站广告招商效果提手框(http://www.zgqzw.com/Copyright/ad.asp)源码

    &lt;SCRIPT language=JavaScript src="inc/Popup.js"&gt;&lt;/SCRIPT&gt; ... HEIGHT: 179px" height="179" alt="" width="713" usemap="#Map" border="0" src="/uploadfile/ewebeditor/11(5).jpg" /&gt; &lt;tr&gt;

    个人网页模版

    &lt;td width="530" height="175" valign="top"&gt;&lt;img src="images/main.gif" width="530" height="175" border="0" usemap="#Map"&gt; &lt;td height="36" valign="top"&gt;&lt;table width="530" border="0" cellspacing="0...

    PHP-HTMLhtml重要知识点笔记(必看)

    2.在图片上利用映射距离usemap来实现按钮跳转。——第8尾集 3.表单必须要有name和value,因为抓包的时候,可发现必须要提交它们 4.fieldset标签——&gt;legend、lable 5.只能用margin-top、margin-left定位div距离页面...

    HAPPY欢乐屋for leadbbs3.14

    align=center&gt; &lt;tr&gt; &lt;td align=center&gt;&lt;a name=top&gt;&lt;/a&gt;&lt;img src=&quot;/images/skin/1/other/keke.gif&quot; width=&quot;740&quot; height=&quot;222&quot; border=&quot;0&quot; usemap=&...

    博客网站首页界面

    &lt;img src="images/spacer.gif" alt="setalpm" width="120" height="120" border="0" usemap="#Map" class="rss" /&gt; ,60,63" href="sc.chinaz.com"&gt; &lt;h2&gt;Retro Photos &lt;div&gt;&lt;span class="date"&gt;Mar ...

    简单网站后台管理

    src="../houtaimoban/houtaimoban/images/logo.jpg" width=155 useMap=#Map border=0&gt; &lt;TD vAlign=top align=left width=214&gt;&lt;TABLE cellSpacing=0 cellPadding=0 width=167 border=0&gt; ...

    CLMapper-crx插件

    Craigslist帖子显示在地图上。 浏览到CraigsList住房部分,列表将显示在地图上。 版本2.0.1中的更改​​: *删除收藏夹,因为CL已经在列表旁边实施了自己的明星 ...useMap=1 支持语言:English (United States)

    js 框架之一

    " &gt;&lt;/iframe&gt; &lt;/div&gt;&lt;br&gt; &lt;img name="map" src="/image/maptop.gif" width="950" height="976" border="0" id="map" usemap="#m_map" alt="" /&gt; &lt;map name="m_map" id="m_map"&gt;&lt;br&gt; ,196,334,...

    旺铺分类代码

    136488456.jpg" width="750" height="104" border="0" usemap="#Map11"&gt; ,35,116,96" href=...

Global site tag (gtag.js) - Google Analytics