CSS/Javascript 기반 이미지 선택기

Question

나를 용서하십시오. 자바 스크립트를 배우기 시작했습니다. 이것이 가능한지조차 모르겠습니다.

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

그래서 내가 달성하고 싶은 (그들이 picholder div의 하단에있는 한 작은 사각형 표시) 난을 변경할 수 있습니다 "picsel"div의 중 하나를 클릭하는 것입니다 : 나는 다음과 같은 HTML 코드가 picholder div와 관련된 클래스를 변경하여 picholder에서 사용되는 backgroundImage입니다.

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

내가 거기에 경고를 실행했습니다과 변수를 잘 추가되고, 그래서 난 것 같아요 궁금합니다, className을 변경하는 것이 가능합니까 (아니면 심지어 명령일까요?). 이 시점에서 나는 className = var 또는 getElementById (var)에 변수를 할당 할 수 없다고 생각하고 있지만, ... 잘 ... 가지고 있습니다.

현재 http://www.mdw-art.com/에서 실행 중이지만 현재 표시되는 사각형을 나타내지 않는 HTML 기반 버전입니다. 그래서 기본적으로 그렇게하고 싶지만, 현재 어떤 그림이 표시되고 HTML에서 코드가 나오는지 상자에 넣으려고합니다. 왜냐하면이 개념을 나중에 다른 갤러리에 적용하기를 원하기 때문입니다.

Answer 1

예 .style.className보십시오. 그렇게하면 선택을 취소하기 위해 요소에서 클래스 이름을 제거 할 수 있습니다.

Answer 2

선택한 항목에 클래스 이름을 추가하고 그 클래스의 CSS 자바 스크립트와 인라인 스타일을 변경하는 대신 당신을 위해 일을 할 수 있도록, .className 대신