码迷,mamicode.com
首页 > 其他好文 > 详细

<img>标签的补充

时间:2017-04-26 19:11:00      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:splay   first   图像映射   lan   rds   img   技术分享   log   blog   

1、img的对齐

img可以用vertical-align: ;属性来决定横排对齐方式;默认值为bottom;

vertical-align: ;可以作用于img或文字或display:inline-block;的元素

2、创建图像映射

带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

标签描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>

<p>点击太阳或其他行星,注意变化:</p>

<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

</body>
</html>

效果图:技术分享

点击图中三个星球会有三个不同的跳转。

 

<img>标签的补充

标签:splay   first   图像映射   lan   rds   img   技术分享   log   blog   

原文地址:http://www.cnblogs.com/Vayne-N/p/6770017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!