묻고답하기
로그인 위젯 만들다가 질문드립니다. 이미지 버튼 토글?기능
2010.10.01 13:53
안녕하세요.
<input type="checkbox" name="keep_signed" id="keepid" value="Y" onclick="return confirm(keep_signed_msg);" />
<label for="keepid" title="{$lang->keep_signed}" >{$lang->keep_signed}</label>
위 부분은 체크박스와 로그인유지 텍스트를 출력하는 부분 입니다.
위 방식이 아닌 두개의 ON과 OFF 이미지로 위 기능을 구현하고 싶은데요.
<input type="image" src="./images/{$colorset}/buttonLogin.gif" alt="login" title="login" class="login" />
이 방법으로 이미지는 출력이 가능합니다.
여기서 궁금한게..
<input type="image" src="이미지주소" name="keep_signed" id="keepid" value="Y" onclick="return confirm(keep_signed_msg);" />
이렇게 이미지 하나를 출력한다고 했을때 이걸 클릭하면 체크박스처럼 Y값이 전송이 될까요?
그리고 저 값이 Y일때 ON 이미지를 N일때 OFF 이미지를 출력해줘야 하는데요.
이 부분은 어떻게 구현하면 좋을지 정보좀 부탁드립니다.
그냥 단순하게 레이어 토글을 생각하긴 했는데 이방법이 최선인지는 모르겠네요...
레이어 토글을 사용한다면 input image에서 value값만 Y/N 나눠서 다른 레이어에 넣어주면 되는건지...
크...어렵네요.. 고수분들의 많은 도움 부탁드립니다..
14:05
일단 자동로그인 기능이 동작하는지를 확인하기 위해 type를 checkbox대신 아래와 같은 소스로 변경했는데 안되네요..
<input type="image" src="./images/{$colorset}/on.gif" name="keep_signed" id="keepid" value="Y" />
14:10
<input type="checkbox" name="keep_signed" id="keepid" value="Y" style="display:none"/>
<label for="keepid" title="{$lang->keep_signed}" ><img src="./images/{$colorset}/on.gif" /></label>
위에 소스처럼 체크박스를 보이지 않게하고 이미지를 라벨로 감싸주니 로그인유지 기능이 동작 합니다.
이제 클릭할때마다 이미지 변경하는것만 하면되는데 어떤 방법이 좋을지 의견 부탁드려요~
해결했습니다.
자바 스크립트를 사용하여 이미지 토글을 했어요.
function autologin(img) {
if(img.checked) {
img.checked = false;
img.src="http://newultra3.hosting.paran.com/xe/widgets/login_info/skins/sky_login/images/default/off.gif"
} else {
img.checked = true;
img.src="http://newultra3.hosting.paran.com/xe/widgets/login_info/skins/sky_login/images/default/on.gif"
}
}
<input type="checkbox" name="keep_signed" id="keepid" value="Y" style="display:none"/>
<label for="keepid" title="{$lang->keep_signed}" ><img src="./images/{$colorset}/off.gif" onClick="autologin(this);"/></label>