如何使用HTML、CSS和JS覆盖带有网格(可点击的方块)的图像？
要使用HTML、CSS和JS覆盖带有网格的图像，可以按照以下步骤进行操作：
- 首先，创建一个HTML文件，并在文件中添加一个
<div>元素，用于容纳图像和网格方块。
<!DOCTYPE html>
<html>
<head>
<title>Overlay Grid on Image</title>
<style>
.container {
position: relative;
display: inline-block;
}
.grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(10, 1fr); /* 网格列数 */
grid-template-rows: repeat(10, 1fr); /* 网格行数 */
gap: 1px; /* 网格间隔 */
}
.grid div {
background-color: rgba(0, 0, 0, 0.5); /* 网格方块颜色 */
cursor: pointer; /* 鼠标指针样式 */
}
.image {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="your-image.jpg" alt="Your Image">
<div class="grid"></div>
</div>
<script src="your-script.js"></script>
</body>
</html>- 在CSS样式中，
.container类设置为相对定位，.grid类设置为绝对定位，并使用grid-template-columns和grid-template-rows属性定义网格的列数和行数，使用gap属性定义网格的间隔。.grid div类设置网格方块的样式，包括背景颜色和鼠标指针样式。.image类设置图像的样式，使其适应容器大小。 - 在JS文件中，可以使用事件监听器来实现网格方块的点击事件。以下是一个示例，当点击网格方块时，会在控制台输出方块的位置信息。
document.addEventListener('DOMContentLoaded', function() {
var gridDivs = document.querySelectorAll('.grid div');
gridDivs.forEach(function(div) {
div.addEventListener('click', function() {
var column = Array.from(div.parentNode.children).indexOf(div) % 10 + 1;
var row = Math.floor(Array.from(div.parentNode.children).indexOf(div) / 10) + 1;
console.log('Clicked on grid square at column ' + column + ', row ' + row);
});
});
});- 将你的图像替换为
<img>标签中的src属性，并将JS文件的路径替换为<script>标签中的src属性。 - 最后，将HTML文件保存为
.html文件，CSS样式保存为.css文件，JS脚本保存为.js文件，并确保它们在同一目录下。然后在浏览器中打开HTML文件，你将看到带有网格的图像，并且可以点击网格方块，控制台将输出方块的位置信息。
这是一个基本的示例，你可以根据需要进行进一步的样式和功能定制。
相关·内容
1回答
如何使用HTML、CSS和JS覆盖带有网格(可点击的方块)的图像？
javascript、html、css
我有一个这样的平面图： ? 我需要用网格(可点击的方块)覆盖特定的区域，就像这样： ? 所以，正如你所看到的，我不需要用网格覆盖所有的图片。只有几个部分。此外，我希望正方形是可点击的，因为我希望能够使用一些JS来改变正方形的颜色。 关于这一点的许多主题，但它们都用网格覆
浏览 39提问于2021-03-31得票数 0
1回答
如何将<div>保存在部分透明的.png下面，可滚动？
javascript、html、css、overlay、scrollable
我有一个div，它包含可滚动的内容，我想在这个div的上面放置一个覆盖。我问的原因是因为我有一个带有背景图像的
浏览 0提问于2014-09-17得票数 0
回答已采纳
1回答
Javascript forEach函数重写自身
javascript、html、css
特别是，我正在尝试仅使用Javascript、CSS和HTML构建一个etch-a-sketch。我设法使用JS生成了一个div网格，并创建了一些函数来修改div的背景颜色，以用随机生成的黑色彩虹颜色填充小方块，最后是一个“阴影”效果，每次鼠标经过方块时，它会将方块的不透明度增加0.1，最终将其变成完全黑色然而，我发现即使阴影功能在第一次点击时起
浏览 19提问于2020-07-21得票数 3
1回答
如何无缝地改变两个网格状的图像？
python、python-3.x、opencv、morphing
我有两个图像，由不同网格步长(10x10和12x12)的彩色方块组成。
有什么算法来处理这个任
浏览 2提问于2022-08-24得票数 0
回答已采纳
1回答
在不使用CSS相对定位的情况下将文本放在链接图像的顶部？
javascript、css
我的目标是在不使用CSS定位的情况下，在表格单元格内的超链接图像上分层文本。有点太多了，让我解释一下……
日历上的每个绿色或橙色方块表示一个可预订的日期，每个方块都带有相关的彩色图像，每个都超链接到相关的日期。将日期覆盖在图像的顶部并不容易，我发现的唯一跨浏
浏览 1提问于2013-04-28得票数 0
回答已采纳
1回答
移动设备上覆盖默认视频播放按钮的Css
css、html、mobile、video、html5-video
在html5视频播放器中，如何使用css覆盖或浮动在iPhone等移动设备上默认视频播放按钮前面带有可点击链接的图像？
浏览 2提问于2013-02-01得票数 0
回答已采纳
2回答
Javascript浏览照片集
javascript、php、html、photos
我想做一个网站，在那里我可以介绍我的客户的一些项目。他是一名建筑师，希望他的客户能够滚动浏览他的建筑和项目。如果用户点击另一个网格项，他之前点击的<
浏览 1提问于2011-11-24得票数 0
回答已采纳
2回答
我想设计一个特殊的正方形组件。
javascript、html、css、reactjs
这是取自的tic tac代码，我的目标是选择特定的平方组件。这个代码有一个游戏，一个棋盘和一个正方形组件。正方形组件在主板method.And中呈现9次，整个板在游戏组件中呈现，所以有一种方法，我可以特别突出显示/样式一个特定的正方形组件。value={this.props.squares[i]});
这个渲染功能是创建9个方格(3X3网格，我怎样才
浏览 1提问于2018-10-29得票数 0
回答已采纳
1回答
设置剑道网格高度可滚动的自动最小高度最大高度
kendo-ui、grid
我知道这是一个经常讨论的问题。无论如何，我想尝试一下:我正在使用多个剑道网格，所以我正在寻找一种可重用和干净的方法，如何设置网格样式，而不会对彼此产生副作用。下面是我想要实现的目标:网格样式1：-min-高度:150 600px heigt:600 max滚动网格样式2：-min-高度:150 600px heigt:300 max滚动
看起来并不特别，是吗我试着设置htm
浏览 3提问于2016-04-22得票数 1
1回答
防止绝对定位的子区域扩展可滚动区域
html、css
我有一个固定的大小，可滚动的父div包含两个子元素:第一个包含内容，并且应该确定可滚动区域的大小。第二种是动态移动的小覆盖，不应影响可滚动区域的大小。也就是说，如果覆盖挂起内容的底部边缘，并且用户一直向下滚动(假设内容大于父div)，滚动应该在到达内容底部后停止，即使这意味着覆盖的一部分是可见的。
这是可能的吗？例如，使
浏览 2提问于2020-05-26得票数 0
回答已采纳
1回答
从弹出窗口覆盖中排除页眉和页脚
jquery-mobile
我希望我的页眉和页脚是可访问的，当一个页面有一个覆盖由于一个弹出式菜单(如在上看到)。所以简而言之，只有带有‘data-role=content’属性的div才应该应用覆盖。如果可能，这应该使用最少的额外CSS和/或JavaScript来实现。我已经查看了整个jQuery移动文档，但没有发现任何与我的问题有关的引用。
浏览 0提问于2012-10-03得票数 2
回答已采纳
1回答
带蓝图的web2py
web2py、blueprint-css
将blueprint与web2py一起使用是常见的还是推荐的？blueprint是否与默认的web2py样式表和layout.html冲突？在web2py应用程序中包含蓝图的正确方式是什么？我假设应该将blueprint目录添加到静态/css目录中，并将推荐的链接添加到部分的layout.html中。
浏览 1提问于2012-02-11得票数 1
回答已采纳
3回答
什么是CSS网格系统？
html、css
我正在研究css框架，主要是为了重置，更好地组织我的项目，等等。
我发现了Html样板(我正在使用它)。我现在看到像blueprint和960gs这样的框架，它们声称是基于网格的布局。有人能解释一下什么是基于网格的布局吗？它怎麽工作?
浏览 0提问于2010-12-16得票数 6
回答已采纳
1回答
Fancybox v2 -删除白色背景？
css、fancybox、transparency、lightbox、fancybox-2
我会尽我所能解释这件事-->我想删除白色背景以及影的iframe，而不是覆盖！我试着玩css文件，这些文件没有用.如果你点击"#1“方块，你就能明白我的意思： (我故意破坏背景图像以看到白色bg)。更新：
由于这些有用的提示，我可以去掉图像的白色背景。但还是不适合我..。
浏览 0提问于2013-11-25得票数 1
回答已采纳
1回答
两个链接之间的可打印字符。如何合法地隐藏，使我的网页仍然正确地出现？
html、css、hidden-text、code、text
在我网站的一个页面上，我有一个可点击图像的网格。在HTML代码中，网格部分如下，图像是通过CSS代码生成的。这是HTML：
...在测试我的页面时，我发现它违反了BITV、TG和WCAG1.0级AAA准则，因为链接之间没有可打印的字符。请参阅：http://achecker.ca/checker&#
浏览 0提问于2016-06-26得票数 0
3回答
选择将图像放在要表示它的元素上。
javascript、jquery、html、css
我有一个像这样的小球格：. . . .. . . .我构建了这样的网格:1 grid > (row >(Ball)* 4) * 4)。原来我有5排，每排有10个球。调整值以匹配这里的示例。问题是，当球被选中时，
浏览 9提问于2015-12-17得票数 2
回答已采纳
1回答
Javascript和jQuery中图像上的可点击网格
javascript、jquery、image、grid、overlay
我有一个图像(1000x1300像素)，并希望将它与一个带有10x10像素单元格的网格覆盖(因此这将是100x130单元格)。然后必须有一种方法点击鼠标左键，在网格上移动一个“标记”底层网格单元格(即更改背景颜色)。({ "opacity": "0.7" }).html("").mouseover(function() {
if (mstate == 1) {
浏览 1提问于2011-05-15得票数 1
1回答
Blogdown::build_site没有看到自定义css文件
css、r、knitr、blogdown
我希望有一个博客文章使用的表，其中的列，只包含阴影广场。我如何建立网站和有阴影的方块</em
浏览 5提问于2020-09-06得票数 2
回答已采纳
1回答
移出内容框，记住最后一个活动框
javascript、jquery、html
(三分之一)
“三分之一”网格项每个包含嵌入在<script type="text/template" />中的图像和隐藏内容，当单击“三分之一”网格项时，它将使用隐藏的内容填充其最近的“一个整体”网格项，然后向下显示内容。它很好，如果我点击一个图像，内容将
浏览 1提问于2015-10-30得票数 1
22回答
禁止正文滚动，但允许覆盖滚动
css、overlay、lightbox
我一直在寻找一种"lightbox“类型的解决方案，允许这样做，但还没有找到(如果你知道的话，请推荐)。
我试图重建的行为就像你在点击图片时在上看到的一样。覆盖图是可滚动的(就像在整个覆盖图中一样，就像页面顶部的页面一样向上移动)，但是覆盖图后面的body 是固定的。我尝试使用CSS (即在整个页面和主体上覆盖一个<e
浏览 403提问于2012-02-15得票数 532
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
