HTML如何设置图片超链接,代码要怎么写?

HTML如何设置图片超链接,代码要怎么写?,第1张

你可以通过把某元素嵌套进a元素使其变成一个链接
把你的嵌套进a元素。举例如下:
<a href="#"><img src="/images/relaxing-catjpg"></a>

超链接是网页中的重要元素,超链接能使浏览者从一个页面跳转到另一个页面,实现文档和网页的互联工作。

了解超链接前还需要知道绝对路径和相对路径的概念。

绝对路径有两个缺点:

需要输入更多内容,

如果文件被移动,需要重新设置所有相关链接。

相对路径更适合网站内部链接。

相对路径使得同处站点文件夹内的相对地址可以自由在文件夹间构建连接,即使站点文件夹所在服务器发生改变,文件夹的所有内部链接都不会出现问题。 

超链接标记基本语法

<a href=”文件名”>链接元素</a>  
<a href=”URL”>链接元素</a>

可以使用input的click事件进行处理,这里假设点击转向的链接是百度,方法如下:

1、DOM0级事件处理:

1)html代码:

2)js代码:

functiongoToBaiDu(){

consolelog('现在去百度啦!')

windowopen('>

}

效果如下:

2、DOM2级事件,绑定click事件,如下:

1)html代码:

2)js代码:

windowonload=function(){

document('btn1')('click',goToBaiDu)

}

functiongoToBaiDu(){

consolelog('现在去百度啦!')

windowopen('>

}

效果如下:

3、上面的方式的打开一个新窗口,还有一个打开链接的方式,是在当前标签页下直接跳转到另一个页面,代码如下:

windowlocationhref=">

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

参考资料:

百度百科-链接图像

用Dreamweaver80网页制作软件很简单就能完成。如果你要在文字上做超链接 可以选定要做链接的文字 在DReamweaver右下方会出现你要添加的链接地址。你只要输入链接就可以了。如果是在上做链接方法也相同,你只要选定该,然后在DReamweaver下方会有一个链接地址,填上就是点击后跳转的链接。如果是用html代码的话:>

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

原文地址: https://www.outofmemory.cn/yw/13354274.html

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

发表评论

登录后才能评论

评论列表(0条)

保存