html热点图（html热点链接）

本篇文章给大家谈谈html热点图，以及html热点链接对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、在HTML中如何实现点击图片转换页面
• 2、HTML图像 怎么有点看不懂啊，图像来源是什么？谢谢
• 3、html代码中如何改变usemap热区颜色

在HTML中如何实现点击图片转换页面

给图片添加热点即可，用HTML代码就下面这样写：

a href=要转到的新页面地址img src=图片/a

也可以利用JAVASCRIPT，这样写：

img src=图片 onclick="location.href='要转到的新页面地址';"

HTML图像 怎么有点看不懂啊，图像来源是什么？谢谢

你这个问题好像有点含糊，不知道你说的是什么意思，图像标记img ，关于此标记：

图像可以使html页面美观生动且富有生机。浏览器可以显示的图像格式有jpeg，bmp，gif。其中bmp文件存储空间大，传输慢，不提倡用，常用的jpeg和gif格式的图像相比较，jpeg图像支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大，gif图像仅包括265色彩，虽然质量上没有jpeg图像高，但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点。因此使用图像美画页面可视情况而决定使用那种格式。

1 背景图像的设定

在网页中除了可以用单一的颜色做背景外，还可用图像设置背景。

设置背景图像的格式：

body background= "image-url"

其中 "image-url" 指图像的位置。

实例：1.html

html

head

title设置背景图像/title

/head

body background="imge/11.gif"

center

p /p

p /p

p /p

p /p

pfont color="#006600" size="+6"盼望着，盼望着，东风来了，春天脚步近了./font

/p

/center

/body

/html

2 网页中插入图片标签img

网页中插入图片用单标签img，当浏览器读取到img标签时，就会显示此标签所设定的图像。如果要对插入的图片进行修饰时，仅仅用这一个属性是不够的，还要配合其它属性来完成。

插入图片标签img的属性

属 性 描 述

src 图像的url的路径

alt 提示文字

width 宽度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.

height 高度 通常只设为图片的真实大小以免失真,改变图片大小最好用图像工具.

dynsrc avi文件的url的路径

loop 设定avi文件循环播放的次数

loopdelay 设定avi文件循环播放延迟

start 设定avi文件的播放方式

lowsrc 设定低分辨率图片,若所加入的是一张很大的图片，可先显示图片。

usemap 映像地图

align 图像和文字之间的排列属性

border 边框

hspace 水平间距

vlign 垂直间距

IMG 的格式及一般属性设定：

img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"

1-1 普通插入图片

实例：2-1.html

html

head

title普通插入图片/title

/head

body

BODY

CENTER

H2爱在深秋/H2

IMG src="../../imge/6-5.gif"

/CENTER

WBR

p秋雨无声无息地下着。BR

飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……BR

黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。BR

然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？BR

/p

/WBR

/body

/html

2-2 设定上下左右空白位置 hspace/vspace

实例：2-2.html

html

head

title设定图像与文本之间的距离/title

body

img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20"

font size="+3"秋雨无声无息地下着。BR

飒飒的秋风不可一世地横行在萧条的郊外。无力与秋风抗争的枯叶，只能带着丝丝牵挂，无可奈何地飘离留恋的枝头。秋蝉哀弱的残声逐渐地少了，地上落叶多了……BR

黄昏，我漫步在郊外的林间，想细细地品味秋雨的凄冷。

然而，“雨到深秋易作霖，萧萧难会此时心”，此时，又有谁能听我诉说心中的那份情怀呢？/fontBR

/body

/html

2-3 设定字画对其方式

图像和文字的之间的对齐是通过align属性来设定的， align的对齐方式有两种：即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样，只有三种：居中（middle）、居左（left）、居右（right）。相对文字对齐方式是指图像与一行文字的相对位置。

对其属性align的设定

属 性 值 对 齐 方 式

top 上对齐

middle 居中对齐

bottom 下对齐

left 左对齐

right 右对齐

实例：2-3.html

html

head

title控制图像相对于文字基准线的水平对齐方式/title

/head

body

img src="../../imge/6-2.jpg" align="left"

此图像相对于文字基准线为靠上对齐的多行文字br试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？br我拚着千呼万唤；你能够出来么？

br这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。

p

hr color="#00ff00"

img src="../../imge/6-2.jpg" align="right"

此图像相对于文字基准线为靠上的多行文字对齐br试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不肯睡去呢？他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘下去找，您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；岂独鸟呢？但是，咫尺天涯，教我如何耐得？br我拚着千呼万唤；你能够出来么？

br这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。

p

hr color="#00ff00"

img src="../../imge/6-2.jpg" align="top"

此图像相对于文字基准线为顶部单行对齐p

hr color="#00ff00"

img src="../../imge/6-2.jpg" align=bottom

此图像相对于文字基准线为底线单行对齐/p

p

hr color="#00ff00"

pimg src="../../imge/6-2.jpg" align="middle"

此图像相对于文字基准线为置中单行对齐/p

p /p

pa href="#" onClick="javascript:window.history.back()"返回/a/p

p

/body

/html

2-4 图片大小设定

实例：2-4.html

html

head

title图像大小的设定/title

/head

body

center

p

缩小图像

pimg src="../../imge/6-3.gif" width="350" height="200"

p原图显示

p

img src="../../imge/6-3.gif" width="400" height="236"

p放大图像

p

img src="../../imge/6-3.gif" width="500" height="250"

/p

/center

/body

/html

2-5 图像边框的设定

实例：2-5.html

html

head

title设定图像的边框/title

/head

body

center

div align="center"

preimg src="../../imge/xjbjtp22.jpg" border="10"/pre

/div

/body

/html

3 图像的超链接

3-1 图像的超链接

图像的链接和文字的链接方法是一样的，都是用a标签来完成，只要将img标签放在a和/a只见就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在body标签中设定。

实例：3-1.html

html

head

title使用图像为选取的对象/title

/head

body

p align="center" /p

h1 align="center"图片的超链接/h1

P

center

a href="" target="_blank"img alt="搜狐网站" src="../../imge/logo[1].gif"/ap

a href=""img alt="百度搜索" src="../../imge/logo[2].gif"/ap

a href=""img alt="新浪网站" src="../../imge/logo(3).gif"/a

/center

/body

/html

3-2 图像的影像地图超链接

在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：imgmaparea下面分别介绍这些标签的用法：

影像地图（Image Map）标签的使用格式：

img src="图形文件名" usemap="#图的名称"

!-- 插入图片时要在img标记中设置参数usemap="#图的名称" ismap，以表示对图像地图（图的名称）的引用；--

map name="图的名称"

!--用map标记设定图像地图的作用区域，并用name属性为图像起一个名字--

area shape=形状 coords=区域座标列表 href="URL资源地址"

......可根据需要定义多少个热点区域

area shape=形状 coords=区域座标列表 href="URL资源地址"

/map

【1】shape -- 定义热点形状

shape=rect： 矩形

shape=circle：圆形

shape=poly： 多边形

【2】coords -- 定义区域点的坐标

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标

例：area shape=rect coords=100,50,200,75 href="URL"

b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度

例：area shape=circle coords=85,155,30 href="URL"

c.任意图形（多边形）：将图形之每一转折点座标依序填入

例：area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"

在制作本文介绍的效果时应注意的几点：

1、在img标记不要忘记设置usemap、ismap参数，且usemap的参数值必须与map标记中的name参数值相同，也就是说，“图像地图名称”要一致；

2、同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有area标记均要在map与/map之间；

3、在area标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套，避免出现在shape参数设置的矩形作用区域，而在cords 中设置的却是多边形区域顶点坐标的现象出现。

实例 3-2.html

html

head

title影像地图/title

/head

body

img src="../../imge/yxlj.jpg" alt="影像地图" hspace="10" align="left" usemap="#yxdt" border="0"

map name="yxdt"

area shape="rect" coords="80,69,180,120" href="" target="_blank" alt="点击链接到百度搜索"

area shape="circle" coords="283,95,45" href="" target="_blank" alt="点击链接到新浪网站"

/map

p /p

p /p

p /p

p /p

p /p

p /p

pa href="#" onClick="javascript:window.history.back()"返回/a/p

/body

/html

4 用img标签插入avi文件

格式：img dynsrc="avi文件地址"

img标签插入avi文件的属性

属 性 描 述

dynsrc 指定avi文件所在路径

loop 设定avi文件循环次数

loopdelay 设定avi文件循环延迟

start 设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放）

实例：4.html

html

head

title设定图像的边框/title

/head

body

center

p align="center"

img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover"

/p

/center

/body

/html

html代码中如何改变usemap热区颜色

使用图片热点技术并不是一个很好的方法

如果需要发生改变热点区域颜色，那是没有好办法的，但是有巧办法，利用JavaScript来改变图片,使用onmouseover事件和onmouseout事件在改变图片的src

例子:

img

src="header.jpg"

width="800"

height="202"

border="0"

usemap="#Map"

id="headerImg"

/

map

name="Map"

id="Map"

area

shape="rect"

coords="452,97,554,145"

href="#"

onmouseover="document.getElementById('headerImg').src='header1.jpg'"/

/map

关于html热点图和html热点链接的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。