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

Question

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

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

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

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

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

Answer 1

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

Answer 2

如果您想坚持使用 Background-Solution，您可以像处理鼠标悬停一样使用它：

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

Answer 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>

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

How do I make a picture in my html website clickable?

javascript

html

css

web

web-testing