<img>图像标签

最新推荐文章于 2024-01-22 08:33:26 发布

请叫我木丁西

最新推荐文章于 2024-01-22 08:33:26 发布

阅读量723

点赞数

分类专栏： html 史上最全的HTML基础教程文章标签： img标签热点图图像映射

本文链接：https://blog.csdn.net/QQ1012421396/article/details/62450755

版权

html 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

史上最全的HTML基础教程

18 篇文章 32 订阅

订阅专栏

<img>图片标签

img标签常用的属性:

src: 规定显示图像的 URL

width: 设置图片的宽

height：设置图片的高

alt：如果图片资源无法找到，那么就显示对应的文字，对图片进行说明

特殊功能： 热点图（ 图像映射 ）

热点图利用Dreamweaver软件操作步骤如下：

①鼠标放在要添加热点图的图片代码处

②切换到“拆分”视图

③点击不同形状的热点图样式，在图片上选取要作为热点图的部分

④更改链接URL和链接目标，保存即可

⑤Dreamweaver自动生成的代码如下：

案例Demo

   
   <!DOCTYPE html >
<!-- 
	<img>图片标签
	
	img标签常用的属性:
		src:	规定显示图像的 URL
		width:	设置图片的宽
		height：	设置图片的高
		alt：	如果图片资源无法找到，那么就显示对应的文字，对图片进行说明
	
	热点图：	
-->
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>图像标签</title>
	<meta name="keywords" content="关键词，关键词"/>
	<meta name="description" content="描述……………………"/>
</head>
<body>
	<img src="yz.jpg" alt="这是什么图片呢？？" width="100px" border="0" usemap="#Map"/>
	<map name="Map">
		<area shape="rect" coords="32,33,73,69" href="http://baidu.com" target="_blank">
	</map>
	<br/><hr/>
	<img src="cool.png" alt="这是什么图片呢？？" border="0" usemap="#Map2"/>
	<map name="Map2">
		<area shape="circle" coords="41,77,10" href="http://QQ.com" target="_blank">
		<area shape="rect" coords="69,69,90,85" href="http://baidu.com" target="_blank">
	</map>
	<br/><hr/>
	<img src="cool.png" width="40px" height="40px" alt="这是什么图片呢？？"/>
	<br/><hr/>
	<img src="cool2.png" alt="这是什么图片呢？？alt图片说明"/>	
</body>
</html>