怎样用HTML代码在图片插入超链接

急... 展开
 我来答
J_ENG
推荐于2019-09-20 · TA获得超过9777个赞
知道答主
回答量:81
采纳率:0%
帮助的人:4.6万
展开全部

1、图像链接

图片超链接和文字超链接是一样的,在图像上插入链接:点击图片,跳转页面:<a></a>之间插入<img/>元素。如:<a href="超链接地址"><img src="路径" alt="替代文本"></a>。(如图)

2、局部链接

在某种情况下,我们不希望整张图片加链接。希望的效果是:点击图片某个区域,链接到某地址。是通过map标签和<area>标签结合使用的。如:

(1)、<img src="超链接地址" alt="替换文本"  usemap="#map名称" width="链接区域宽度"  height="链接区域高度"/>

(2)、<map name="map名称" id="id名称"><area shape="描述区域的形状" coords="坐标" href="链接地址" target="打开方式" alt="替换文本" /></map>

扩展资料:

<img>元素向网页中嵌入一幅图像。

img元素的属性:

(1)、src:图片来源URL。

(2)、alt:规定图像的替代文本。

(3)、height和width:单位为像素,如果不指定,则为默认;如果只指定height或width,则自动调整大小。

(4)、ismap :将图像定义为服务器端图像映射。

(5)、usemap:将图像定义为客户器端图像映射。

(6)、longdesc: 指向包含长的图像描述文档的 URL。

<map>元素定义一个客户端图像映射。

map元素的属性:

(1)、id:为 map 标签定义唯一的名称。

(2)、name:为 image-map 规定的名称。

注意:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以应同时向 <map> 添加 id 和 name 属性。

<area> 元素定义图像映射中的区域。

area元素的属性:

(1)、alt:规定图像的替代文本。

(2)、shape:用于描述区域的形状,rect\poly\circle\default可选,default指的是还没有被定义的区域。

(3)、coords:指定区域的坐标。比如矩形有4个坐标,前两个是左上角的x,y坐标,后两个是右下角的x,y坐标。

(4)、href和nohref:href指定目的的链接,如果不指定href属性,则需要指定nohref,nohref="nohref"

(5)、target:和<a>标签的作用一样。

注意:area 元素永远嵌套在 map 元素内部。

参考资料:

百度百科-链接图像

博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景。ai生... 点击进入详情页
本回答由博思aippt提供
A1620921354
2021-05-25 · TA获得超过5813个赞
知道答主
回答量:388
采纳率:100%
帮助的人:16.7万
展开全部

h要想给图片加上链接,首先我们要给网页插入一张图片,我们都知道图片的格式有很多,其中就包括一些jpg,png,bmp,并不是所有格式的图片都是可以上传的,只有jpg和png可以插入网站中,一些pad和ai的格式的图片是不能放入到文章当中去的。

html页面是不能直接插入图片的,而是插入一个地址去引用要插入的图片,只要我们使用<img/>标签去插入图片,并且在图片放入到我们的服务器中,就可以实现HTML放入图片的链接。

语法:

 <imgsrc="****.jpg"alt="***"/>

<ahref="http://www.php.cn/>

<imgsrc="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt="***"/>

img元素的属性:

src:图片来源URL。

alt:规定图像的替代文本。

height和width:单位为像素,如果不指定,则为默认;如果只指定height或width,则自动调整大小。

ismap :将图像定义为服务器端图像映射。

usemap:将图像定义为客户器端图像映射。

longdesc: 指向包含长的图像描述文档的 URL。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
ming284132870
推荐于2018-04-20 · TA获得超过295个赞
知道答主
回答量:95
采纳率:0%
帮助的人:0
展开全部
<html>
<head>
<title>给图片插链接</title>
</head>
<body>
<a href="http://www.google.com" target=_blank><img src="1.jpg"></a>
</body>
</html>
1.jpg是你的图片 href= 后面接的是你要链接的网页的绝对地址 target=是页面属性 我这里是从另一个页面打开链接
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
netyq
2010-03-13 · TA获得超过6055个赞
知道大有可为答主
回答量:2014
采纳率:50%
帮助的人:217万
展开全部
<html>
<head>
<title>标题</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="bg.jpg" /></a>
</body>
</html>

这是实现图片超连接最简单的HTML语句了。
这里假设图片连接到百度,图像保存在HTML文件同一文件夹下,图片文件为bg.jpg。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
已注册成功啦
2010-03-13 · TA获得超过744个赞
知道小有建树答主
回答量:497
采纳率:0%
帮助的人:298万
展开全部
<a href="/"><img src="123.jpg"></a>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(7)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式