Question

So forgive me, I’m just starting learning Javascript, I don’t even know if this is possible. I have the following HTML code:

<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>

And so what I want to accomplish is by clicking on one of the “picsel” divs (they appear as little squares at the bottom of the picholder div) I can change the backgroundImage used in picholder by changing the class associated with the picholder div. My Javascript appears as such:

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";
}

And my CSS appears as such:

#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');}

I’ve run an Alert on it and the variables are being added right, so I guess what I’m wondering is, is it possible to change the className (or is that even a command?). At this point I’m thinking I can’t assign a variable to the className=var or getElementById(var), but…well…have at it.

It’s currently running at http://www.mdw-art.com/, but in an HTML-based version that doesn’t indicate which square is currently being displayed. So I basically want it to do that, but I’m trying to get the boxes to indicate which one is currently displayed and get the code out of the HTML (because I want to apply this same concept to other galleries later).

Answer 1

Yes, add a class name to the selected item and allow the CSS of that class do the work for you instead of changing the inline style with JavaScript. That way you can just remove the class name from the element to un-do the selection.