如何使图像在HTML中可以被点击?

如何使图像在HTML中可以被点击?在HTML中,可以使用<a>标签和button标签使Images可点击,以下是两个办法:

html标签

使用<a>标签使图像可点击

在HTML中,<a> 标记用于创建超链接。

单击超链接会将用户重定向到另一个指定的位置/页面。

<a href="https://google.com" target="_new"> 
This is a hyperlink and will be redirected to Google.
</a>

<a>…</a> 之间的任何文本都将成为超链接

href <a>标记中使用的HTML属性,用于定义单击时重定向的位置。在<a>标记中使用了target =“ _ new” ,因此,每当用户单击超链接时,它将在新的浏览器选项卡中打开。

与文本一样,图像也可以放置在<a>…</a> 标记之间,以使其可单击。

此示例使图像可点击和重定向:

<a href="https://google.com" target="_new"> 
<img src="pic_trulli.jpg" alt="sorry!noimages" height="200px" width="300">
</a>

在HTML中,<img> 标记用于定义图片,

SRC <IMG> 标记来定义图像的源保存在文件夹中,

ALT <IMG> 标记来定义可选的文本时浏览器无法呈现图像被示出,

高度和宽度定义图片的大小。

使用标签使图像可点击

在HTML中,<button> 标记用于创建按钮。

在HTML中,按钮主要用于访问javascript函数。

可以像这样创建一个按钮:

<button>单击我</ button>

您还可以将图像放置在按钮标签之间,此示例使图像具有点击效果:

<button>
<img src="pic_trulli.jpg" alt="sorry!noimages" height="200px" width="300">
</button>

同时使用a和button标记使图像可点击

img标签位于button标签下面:

<button> <img> </button>

并且button标记位于a标记下:

<a>
<button> <img> </button>
</a>

这是完整的示例,此示例使Image可点击,并可通过点击效果重定向:

<a href="https://google.com" target="_blank">
<button>
<img src="pic_trulli.jpg" alt="Trulli" width="300" height="200"></button>
</a>

发表评论

电子邮件地址不会被公开。 必填项已用*标注