首页 > 代码库 > <img>标签的补充

<img>标签的补充

2024-09-17 14:35:28   220人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="http://www.mamicode.com/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="http://www.mamicode.com/statics/images/course/venglobe.gif">
</map>

</body>
</html>

效果图：技术分享；

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

 

<img>标签的补充


联系
我们