HTML嵌图与创建分区响应图

来源：互联网发布：云南大学学工网络系统编辑：程序博客网时间：2024/06/14 11:19

一、嵌图

< img>标签：（单标签），嵌图作用

1.< img>属性

1.src：设置图片位置（显示图片）
2.width：设置图片宽度（宽度和高度基本设置一个就可以，会等比例变化），width=“100”或“50%”，前一个改变图片大小，而后一个是随着网页宽度变化随着变化（动态）
3.height：设置图片高度
4.alt：设置图片备用内容（加入图片失效，会出现alt中的文字用来提示）

2.img超链接

a标签嵌套img就可以

二、创建分区响应图

顾名思义就是在一个图片中设置热点区域，点击某个区域，进入某个地址

1.map、area标签

map客户端分区响应关键元素

area可以有多个，每个各自代表图像上可以被点击的一块区域

map只有一个属性—–name

< map name=”自定义名字”>

需要对应img中

< img usemap=”#自定义名字”>

#号别忘记

area属性分两类

第一类:点击某位置到指定的URL

href：该区域被点击后浏览器应该加载的URL

alt：定义图片备用内容

第二类:shape属性和coords属性，共同起作用
shape

rect:矩形区域。（四个整数）

circle:圆形区域。（三个整数）

poly:多边形区域。（只是包含6个逗号，每一对数字代表一个顶点）

default:代表默认区域，覆盖整张图

coords

矩形，从左到右分别代表图像（左边缘，上边缘，右边缘，下边缘）

圆形，从左往右（左边缘到圆心的距离，右边缘到圆心的距离，半径）

多边形，从左往右（1顶点的x，1顶点的y，2顶点的x，2顶点的y，3顶点的x，3顶点的y）

default，不需要coords

2.如何确定coords里的位置

1.如果是DW，编辑器自带
2.IDEA不知道有没有，可以使用一下代码，对照寻找，以下代码会在表格中学到，当然用完之后，将代码注释调就ok咯
< form>
< input type=”image” src=”图片地址”>
< /form>
3.使用ps等软件

三、创建分区响应代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>阿水的阿里</title></head><body bgcolor="#f0f8ff"><!--<form>    <input type="image" src="xlj.jpg"></form>--> <img src="xlj.jpg" usemap="#phone" border="0" alt="手机应用图片"><map name="phone">    <area href="电话簿.html" shape="rect" coords="25,23,103,95" target="_blank" title="电话簿">    <area href="短信.html" shape="rect" coords="138,23,212,95" target="_blank" title="短信"></map><br><h1>以上是手机应用</h1></body></html>