基于CSS/Javascript的图像选择器

CSS/Javascript-based image selector

本文关键字：图像 选择器 Javascript CSS 基于      更新时间：2023-09-26

所以请原谅我，我刚刚开始学习Javascript，我甚至不知道这是否可能。我有以下HTML代码：

<div class="container">
<div class="topspace">
    <div id="picholder" class="pic1">
        <div class="picsel" id="picsel1" onclick="imgSel(1)"></div>
        <div class="picsel" id="picsel2" onclick="imgSel(2)"></div>
    </div>
</div>
</div>

因此，我想完成的是点击其中一个"picsel"div（它们在picholderdiv底部显示为小方块），我可以通过更改与picholderdiv相关的类来更改picholder中使用的背景图像

function imgSel(n) {
var id1 = "pic" + n;
var id2 = "picsel" + n;
// 'zero out' all the picsel boxes to their default color
document.getElementByClass('picsel').style.backgroundColor="#333";
// change the background-image for picholder
document.getElementById('picholder').style.className=id1;
// change the picsel box that was clicked to white
document.getElementById(id2).style.backgroundColor="#FFF";
}

我的CSS显示为：

#picholder {width:798px; height:340px; border:1px solid #333; background-color:#333;}
.picsel {width:8px; height:8px; background-color:#333; border:1px solid #333; margin-left:4px; top:340px; position:relative; float:left;}
.picsel:hover {cursor:pointer; background-color:#888;}
.pic1 {background-image:url('data/main001.jpg');}
.pic2 {background-image:url('data/main002.jpg');}

我已经在上面运行了一个Alert，变量添加得很好，所以我想我想知道的是，有可能更改className吗（或者这甚至是一个命令吗？）。在这一点上，我认为我不能将变量分配给className=var或getElementById（var），但是。。。好

它当前运行于http://www.mdw-art.com/，但在基于HTML的版本中，该版本不指示当前显示的是哪个正方形。所以我基本上希望它能做到这一点，但我正在尝试让框指示当前显示的是哪一个，并从HTML中获取代码（因为我想稍后将同样的概念应用于其他库）。

是的，在所选项目中添加类名，并允许该类的CSS为您完成工作，而不是使用JavaScript更改内联样式。这样，您就可以从元素中删除类名来取消选择。

尝试.className而不是.style.className

相关文章：