Javascript 着色HTML<；面积>；基于点击

函数进食（Num）{
console.log（“输入”，Num）；
吃体=Num；
for（设i=0；i

---

如果您知道大小/位置将是静态的，您可以手动定位

映射

元素并调整每个

区域的大小以匹配：


函数进食（Num）{
const squares=document.queryselectoral（'area'）；
console.log（“输入”，Num）；
for（设i=0；i

.container{
位置：相对位置；
}
地图{
显示：网格；
间隙：1px；
位置：绝对位置；
顶部：68px；
左：22.5px；
}
区域{
宽度：79px；
高度：79px；
排名：0；
}
这里有一种替代方法，使用内嵌式SVG，图像背景和前面的多边形元素。
handleSVGClick
处理程序位于SVG元素本身上，使事情更易于管理，重复性更少


函数handleSVGClick（事件）{
如果（event.target.tagName==“多边形”）{
event.target.style.fill=`hsl（${Math.random（）*360}，90%，60%）`；
}
}
多边形{
笔画宽度：2px；
冲程：#333；
填充：透明；
}
为了使该区域可点击，他们需要具有href属性。（至少在Firefox中是这样）。
因为它们是隐藏的，所以很难跨浏览器设置它们的样式。
所以我换了一种方式，在与区域相同的位置创建元素，并在单击区域时设置这些元素的样式

这些覆盖只是一个概念的证明，但由于我在这里使用的是百分比，所以即使图像缩小，这也可以工作

另外，我建议在绝对支持Javascript的情况下执行所有这些操作，如果不希望用户再次单击区域元素，还建议删除区域元素。
如果您还想让我在此进行微调，请告诉我：


函数进食（Num）{
console.log（“输入”，Num）；
如果（Num==4）{//testcode
document.querySelector（“#overlay”+Num）.style.display=“block”；
}
//从地图中删除区域
}
（函数init（）{
var container=document.querySelector（'.container'）；
container.classList.add（“js”）
})（）
img{
最大宽度：100%；
}
.覆盖{
显示：无；
}
.集装箱{
显示：内联块；/*与图像宽度相同的容器*/
宽度：自动；
外形：2倍纯红；
}
.container.js{
位置：相对位置；
}
.container.js.overlay{
位置：绝对位置；
顶部：16.8%；左侧：4.3%；
宽度：13.5%；高度：18.5%；
背景：黑色；
z指数：1；
}

你好，赫巴。你有什么相关的代码可以发布吗？也可以添加一张预期布局的图纸。我不知道你的意思：
一堆10个方块
，
从1到3个方块
我添加了html和javascript文件，我想给方块上色。例如，当我点击方块3时，我想给方块1、2和3上色，因为图像地图没有真正的视觉效果，所以它们不能上色。我建议制作你的图像SVG；SVG形状，如正方形和多边形，可以简单地重新着色。我不明白这到底能解决什么问题？我的问题是我不能给这堆方块上色。但是，它们是可点击的，我可以在我的代码中找到用户点击了哪个方块，这会给它们上色，点击左侧列中的任何方块，它们都会应用背景色。例如，如果我点击方块3，从1到3的方块是黑色的。有没有办法让用户再次点击2，那么1to2中的方块只有颜色？有，我已经更新了我的答案。就个人而言，我会选择单独的
元素，但是，这只是我的偏好。你能告诉我你是如何标记每个方块的吗？这部分也是你在这里做的数学（${math.random（）*360}，90%，60%）

是生成随机颜色还是有其他用途？只是为了漂亮的颜色，是的。您可以在上找到SVG多边形的文档。有没有办法确定我单击了哪个多边形？