当前位置 CSS模版园 >> 网站制作 >> html >> 第6课 第3节 常用标签:图像、图像映射

原创第6课 第3节 常用标签:图像、图像映射

第6课 第3节 常用标签:图像、图像映射

HTML 图像

图像使用<img>标签定义,<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。

<img src="url" alt="文本" width="图片宽度" height="图片" />

属性:

属性 描述
src 必填,图像的 URL 地址
width 规定图片宽度
height 规定图片高度
align 浮动至段落的左边或右边
usemap 图像映射,图像映射指的是带有可点击区域的图像
usemap 属性与 <map> 元素的 name 或 id 属性相关联,以建立 <img> 与 <map> 之间的关系。
<p>src:<img src="/statics/demo/eg_cute.gif" alt="演示src属性"></p>
<p>alt:<img src="no.jpg" alt="演示alt属性"></p>
<p>演示图片宽高:<img src="/statics/demo/eg_cute.gif" width="30" height="30">,规定图片大小为宽:30px,高30px</p>
<p>图像<img src="/statics/demo/eg_cute.gif" align="bottom">在文本中</p>
<p>图像<img src ="/statics/demo/eg_cute.gif" align="middle">在文本中</p>
<p>图像<img src ="/statics/demo/eg_cute.gif" align="top">在文本中</p>
<p>图像<img src="/statics/demo/eg_cute.gif" align="right">在右边</p>
<p>图像<img src="/statics/demo/eg_cute.gif" align="left">在左边</p>

创建图像映射

<img src="/statics/demo/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="/statics/demo/eg_venus.gif" target ="_blank" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="/statics/demo/eg_merglobe.gif" target ="_blank" alt="Mercury" />
  <area shape="rect" coords="-1,0,109,260" href ="/statics/demo/eg_sun.gif" target ="_blank" alt="Sun" />
</map>


area属性:

属性 描述
coords 坐标值 定义可点击区域(对鼠标敏感的区域)的坐标。
href URL 定义此区域的目标 URL。
nohref nohref 从图像映射排除某个区域。
shape default 定义区域的形状。
rect
circ
poly
target _blank 规定在何处打开 href 属性指定的目标 URL。
_parent
_self
_top


<area>标签中的coords属性是图片中的坐标,有人会说坐标好难取啊,不用担心,打开Dreaweaver,输入上述代码

执行完第三步,会弹出一个对话框,点击确认 就会出现下图的样式,输入相应的内容就可以了

到此,一个图片映射就创建完成啦,是不是很简单!


当然选中的区域还可以进行移动和放大,大家可以试试

原创文章内容原创,转载请注明出处:cssteach.com

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-9-47.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版