웹 기반 시험에 깃발을 추가하는 방법은 무엇입니까?

Question

클릭 할 때 색상을 변경하는 간단한 플래그를 추가하고 싶습니다. (e.i. 투명 플래그가 플래그가 켜지면 플래그가 빨간색으로 바뀝니다). 누군가가이 문제에 대한 도움을 주거나 저에게 대본을 줄 수 있습니까?

Answer 1

가장 간단한 방법은 두 개의 이미지를 사용하는 것입니다. 클릭하면 한 이미지를 숨기고 다른 이미지는 표시합니다. 여기 근무 데모 : http://jsfiddle.net/jfriend00/yzYJ3/

HTML :

<div id="container"> 
<img src="http://photos.smugmug.com/photos/344287800_YL8Ha-Ti.jpg"> 
<img src="http://photos.smugmug.com/photos/344284440_68L2K-Ti.jpg" style="display: none;"> 
</div> 

CSS :

#container {position: relative; height: 66px; width: 100px;} 
#container img {position: absolute; top:0; left:0} 

JS (jQuery를)

var flagged = false; 
$("#container").click(function() { 
    $(this).find("img").toggle(); 
    flagged = !flagged; 
}); 

Answer 2

투명 플래그의 사진과 플래그 플래그를 가지고 (예 : {0, 0}의 투명한 투명한 부분과 {0, 22}의 빨간색 부분} 조지아 22x22 픽셀 크기)와 자바 스크립트와 CSS로 전환 할 :

이

자바 스크립트 파일에서 (에서 CSS 파일)

.flag { 
    background-image: url('flag.png'); 
    display: inline-block; 
    height: 22px; 
    width: 22px; 
} 

.flag.active { 
    background-position: 0 22px; 
} 

()

function toggleFlag(flag) { 
    if(/\bactive\b/.test(flag.className)) { 
     flag.className = flag.className.replace(/(^|\s)active(\s|$)/g, ""); 
    } else { 
     flag.className = flag.className ? flag.className + ' active' : 'active'; 
    } 
} 

단지와 toggleFlag 전화 토글 될 때 플래그를 지정합니다.

Answer 3

당신은 jQueryUI에 jQuery를하고 예제를 봤어 - http://jqueryui.com/