Detailed explanation of sample code for inserting pictures and adding map index into html web pages

1. Picture formats supported on the WEB:

GIF: can save 256 colors, supports transparent colors, supports animation effects
JPEG: does not support transparent colors and animations, colors can Up to 1670 kinds
PNG: supports transparent colors, does not support animation, and has up to 1670 kinds of colors

2. Insert the image into the web page using the tag:

src: Set the image, the value is equal to the path strength of an image file
height: Set the height of the image, the value is expressed in pixels or percentage (will automatically scale in proportion)
width: Set the width of the image, the value is in Represented in pixels or percentages
border: Add a border to the image
alt: Image description text, the value of this attribute will be displayed when the image is not displayed
title: This attribute indicates that when the mouse is placed on the image When it is up, the value of this attribute will be displayed
align:Attribute value=leftThe picture is on the left, the text is on the right
rightThe picture is on the right, the text is on the left
topThe text is vertical and the text is vertical
MiddleThe text is vertical Centered
Bottom text is vertically centered (default)
vspace: The attribute value is pixels, defining the blank space at the top and bottom of the image
hspace: The attribute value is pixels, defining the blank space on the left and right sides of the image

The code is as follows:

<img src="/static/imghwm/default1.png"  data-src="../../../素材库/001.jpg"  class="lazy"   style="max-width:90%" style="max-width:90%"border="10"alt="安踏正版"title="安踏正版"hspace="20"vspace="20"/>
<p>
<!--图文混排-->
<img  src="/static/imghwm/default1.png"  data-src="../../../素材库/001.jpg"  class="lazy"   style="max-width:90%" style="max-width:90%"align="left"/ alt="Detailed explanation of sample code for inserting pictures and adding map index into html web pages" >
11、考试考得好，全靠同桌好。</p>
<p>12、在学校是那钱混日子，现在是拿日子混钱！</p>
<p>13、一些人，总要出卖他所有的，去换取他所没有的。</p>
<p>14、自爱，必先自私，唯有自私，才能大爱。</p>
<p>15、吉尼斯纪录：全世界最大的茶几面积为960万平方千米，可放置13亿杯具。</p>
<p>16、分手多没意思，有本事咱俩玩离婚！</p>
<p>17、走人民币的路，让人民无路可走！</p>
<p>18、三鹿奶粉，后妈的选择。</p>
<p>19、有一天小三哭了，因为出现了小四！</p>
<p>20、和你分手，因为，你连牵手都不配！</p>
<p>21、别在我面前摆POSE，我真怕忍不住想摔相机。</p>
<p>22、我们只是路人甲乙丙丁，在这花花世界集体游戏。无论你输我赢，到最后咱们都会一起GameOver！</p>
<p>23、我这一生一共做错两件事，其一是生出来，另一是活下去。</p>
<p>24、如果我死了，我的第一句话是：老子终于不用怕鬼了。</p>
<p>25、哥是文明人，所有脏话均已使用唾液消毒。</p>
<p>26、名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？</p><!--使用图像作为超链接用图像做超链图像会自动加上浅蓝色的边框点击了超链接后会变成紫色边框可以使用img标签中的border属性就边框去掉-->
<ahref="#"><img src="/static/imghwm/default1.png"  data-src="../../../素材库/yingyue.png"  class="lazy"border="0"alt="京津冀"/></a>

3. HTML map index:

Map index, that is, using a certain part of the same picture as a hyperlink, you can Make a lot of hyperlinks (you can do it using the design view)

The code is as follows:

<!--
格式:<mapname="图象名称"id="图象名称">
<areashape="选取区块的形状"coords="坐标"href="URL"alt="文字说明">
</map>
<img  src="/static/imghwm/default1.png"  data-src="URL"  class="lazy"USEMAP="#图象名称" alt="Detailed explanation of sample code for inserting pictures and adding map index into html web pages" >
<map>声明整张图使用地图链接方式进行连接.
name,id指此图的名称.
<area>表示我们所要链接其中一点的区快
shape表示我们所选择的形状,如:rect矩形circle圆poly多边形
coords表示地图的坐标位置!!
-->
<img src="/static/imghwm/default1.png"  data-src="../../../素材库/42a98226cffc1e173ec6f5894b90f603738de909.jpg"  class="lazy"alt="MM"   style="max-width:90%" style="max-width:90%"hspace="20"border="0"align="left"usemap="#Map"title="MM"/>
<mapname="Map"id="Map">
<areashape="rect"coords="39,99,76,137"href="#"alt="打你哦"/>
<areashape="circle"coords="94,200,17"href="#"alt="好大"/>
<areashape="poly"coords="87,50,119,50,121,70,91,67"href="#"alt="myeyes"/>
</map>

Add an icon to the web page: is placed in the header tag

For more HTML web pages to insert pictures and add map index sample codes for detailed explanations, please pay attention to the PHP Chinese website for related articles!