Javascript 有不同的图片按钮覆盖，但它只打开一个覆盖

/*当你点击图片时，它会打开一个覆盖图，如果你点击任何地方，它就会关闭*/
函数on（）{document.getElementById（“over1”）.style.display=“block”}
函数off（）{
document.getElementById（“over1”）.style.display=“无”；
}    
函数on（）{document.getElementById（“over2”）.style.display=“block”}
函数off（）{
document.getElementById（“over2”）.style.display=“无”；
}

.集装箱{
背景色：#94AB98；
高度：370px；
宽度：280px；
利润率：30像素；
边缘底部：60px；
浮动：左；
显示：内联块；
} 
.container.bildbt1{
宽度：230px；
高度：230像素；
差额：25；
边界：无；
背景：url（pic1）；
}
.集装箱.bildbt2{
宽度：230px；
高度：230像素；
差额：25；
边界：无；
背景：url（pic2）；}
#超过1{
显示：无；
宽度：100%；
身高：100%；
背景色：rgba（65,84,80,0.95）；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
线高：130%；
}
#超过2{
显示：无；
宽度：100%；
身高：100%；
背景色：rgba（65,84,80,0.95）；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
线高：130%；
}
#文本1{
位置：绝对位置；
最高：50%；
左：50%；
颜色：白色；
字号:20 ;；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
#文本2{
位置：绝对位置；
最高：50%；
左：50%；
颜色：白色；
字号:20 ;；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

/*这些是我的容器，带有按钮*/
一些文本
文本也一样
还有文本
还有文本

第二组函数覆盖第一组函数。给他们起不同的名字。或者更好的方法是，插入一个参数，比如你想要打开和关闭的元素id。你能给我一个例子吗？你有两个名为

on（）

的函数和两个名为

off（）

的函数，每个函数的第二个都会覆盖第一个。重命名它们，使它们具有unqiue名称，或者只使用其中一个名称，但插入要显示/隐藏的元素的不同的

id