html - 是否有将 html 图像链接到自身的 css 选项?

标签 html css html-head

所以这样:

<html>
    <head>
        <style>
            img{href:self}
        </style>
    </head>
    <img src="./Sampleimage"/>
</html>

基本上是我需要的代码,但由于我不知道如何或什至不知道是否可以选择这样做,我想,我必须问比我更聪明的人。

我有点不得不这样做,因为我在这个 html 文档中有大约 200 张图片,并且每张图片都必须链接到自身。所以一个单独的<a>每张图片的标签都不会很时尚。

最佳答案

扩展 WillardSolutions 的评论...

document.getElementById("myImg").addEventListener("click", function() {
  window.open(this.getAttribute("src"));
});
.clickable {
  cursor: pointer;
}
<img id="myImg" class="clickable" src="https://www.w3schools.com/images/compatible_chrome.gif"/>

打开你的浏览器控制台可以看到打开被屏蔽的 URL...

如果您希望它在新窗口/标签中打开,请使用:

window.open(this.getAttribute("src"), '_blank');

关于html - 是否有将 html 图像链接到自身的 css 选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54040130/

相关文章:

html - 表单在移动浏览器中填充 100% 宽度

html - 将鼠标光标更改为我自己的图像

php - 包含 js 库以从正文内部开始,并且仅特定于一页

caching - 防止缓存 iframe src 中的外部文件(使用 CloudFlare)

jquery - CSS3中的多种垂直背景颜色

css - 为什么 <head> 中有 'This is not a zero-length file'

html - 像表格一样对齐 HTML5 定义列表,无需设置宽度,也无需 Javascript

html - 如何在 Jupyter Notebook 上的 Jupyter 小部件上显示视频

html - 如何让 Chrome 扩展程序抓取并保存图像,永久缓存它?

javascript - 仅显示非空集合的标题