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

怎样用HTML代码在图片插入超链接,第1张

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 元素内部。

参考资料:

百度百科-链接图像

1、给要图片加上链接,需要先将它切片,,在PS里,用切片工具将该页面图片全切片完成。

2、然后再点击PS的文件菜单,再点击导出web所有格式,箭头所指处。

3、在d出的窗口里面,点击保存,通过以上 *** 作,这样就能先将要添加链接的图片以生成html文件。

4、保存后,打开存放该html文件的目录,点击它,拖动到Dreamweaver中,。

5、在Dreamweaver中打开该用图片生成的html文件后,就可以直接用鼠标点击要添加链接图片,然后在下面属性面板上的链接后面,把要链接到的地址输入进去。

6、就这样,可以依次把其它要添加链接的图片,都加好图片链接后,再点击Dreamweaver上的文件,再点击保存。

7、保存后,就可以通过浏览器打开该已添加图片链接的文件,将鼠标移到已加上链接的图片上方,这时鼠标就会自动改变成有链接的形状,在浏览器下方也会出现该链接地址,说明该图片链接已添加成功。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/7872601.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-10
下一篇2023-04-10

发表评论

登录后才能评论

评论列表(0条)

    保存