如何使我的 html 网站中的图片可点击？答案

【问题标题】：How do I make a picture in my html website clickable?如何使我的 html 网站中的图片可点击？
【发布时间】：2021-02-28 15:26:58
【问题描述】：

我正在尝试制作一个网站，但我对 html 有点陌生，不知道如何使图片可点击。

<div class="portfolio-img-background" style="background-image:url(Images/Dirt.jpg)">
                    
                </div>

这就是我显示图像的方式，因为我稍后会在 css 中更改 te 样式。所以我想知道我需要添加什么才能使这张图片可点击。提前感谢您的帮助！

我的整个代码： https://pastebin.com/uiHH4vdB

很抱歉没有正确指定可点击。我需要它做的是当我点击我需要打开/转到另一个 html 文件的图片时。

【问题讨论】：

“可点击”是什么意思？当您点击图片时，您希望发生什么？
因为您的“图像”是一个 div，它只是可点击的，如果您想在点击时发生某些事情，只需添加一个点击事件

标签： javascript html css web web-testing

【解决方案1】：

如果您想坚持使用背景解决方案，您可以按照处理鼠标悬停的方式进行操作：

porfolioItem.addEventListener('click', () => {
   console.log('click');
})

【讨论】：

【解决方案2】：

试试这个脚本： <a href="your landing page url"> <img src="your image url" /> </a>

【讨论】：

【解决方案3】：

你可以像这样使用 jQuery

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
// put this on head or after </body>

然后

<script>
$('.portfolio-img-background').click(function() {
    // do something here
})
</script>

【讨论】：