简述:

HTML中以下几种方式可以用来创建一个图片按钮(或是图片超链接):

  1. a标签
  2. button标签
  3. input标签中的image类型

下面一一示例。

详解:

1、a标签

a标签用于生成超链接,当内嵌img图片标签时,点击对象就是该图片。

点击会跳转到指定链接。

创建格式:

<a href="http:\\www.baidu.com" target="_blank">
	<img src="111.jpg" width="80" alt="百度">
</a>

href属性:超链接地址
target属性:新链接打开方式(_blank为新窗口形式)
alt属性:备用信息,当图片丢失时显示该文字

创建结果:
在这里插入图片描述

2、button标签

与a标签一样,当内嵌图片标签时,该按钮就是图片按钮。

当不绑定事件时,点击无任何反应。

创建格式:

<button>
	<img src="111.jpg" width="80" alt="图片">
</button>

创建结果:
在这里插入图片描述

3、input标签

input标签中,当标签类型为image时,就可以产生一个图片按钮。

点击时会在url中反馈像素点坐标。

创建格式:

<form action="">
	<input type="image" src="111.jpg" alt="图片" width="300">
</form>

src:图片链接
width:图片像素宽度(宽度和高度只设定一个的话,HTML会根据比例进行整体图片的放大或缩小)

创建结果:
在这里插入图片描述
可以看出,当点击图片时,url中会反馈点击的像素点坐标。

学习整理,若有问题请指出。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐