패스워드미터를 이미지로 대체해봤습니다. [또수정] 080424 정보
패스워드미터를 이미지로 대체해봤습니다. [또수정] 080424관련링크
첨부파일
본문
03.패스워드미터 이미지중 맞춤법 틀린 것(고은비님 지적)
1.수정내용
-아주않좋습니다. (X)
-아주안좋습니다. (O)
-약간않좋습니다. (X)
-약간안좋습니다. (O)
라는 지적을 받았습니다.
2.이미지만 교체하시는 분은 첨부된 이미지(핑크색 이뿐거ㅡㅡ;;)
를
약간안좋습니다 m2.gif 로
아주안좋습니다 m1.gif 로
저장하신 후, skin/outlogin/basic_pm/img/
에 덮어주세요.
3.새로 다운받는 분들은 관계 없습니다.(수정해서 다시 올렸습니다.)
PS 은비님 고마워요 ㅡㅡ;;
02.패스워드미터 줄밀림 현상 해결(아빠불당님)
http://www.sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=90316
<style type="text/css">과</style>사이 적당한 곳에 추가합니다.
#passwordDescription {display:none;}//없어져라 호이~!!
01.패스워드미터 이미지 오류(곰순이푸님)
세상에 창피해서 어쩐답니까..;;
.strength0 {background-image:url('<?=$member_skin_path?>/img/m1.gif?>');} /* 매우부족 */
이걸
요렇게 고쳐야 하네요 ;; ㅠㅠ
.strength0 {background-image:url('<?=$member_skin_path?>/img/m1.gif');} /* 매우부족 */
아래 소스는 고쳐 놓았습니다.
--------------------------------------------------------------------------------
링크1번은 원본팁입니다.(아빠불당님의)
링크2번은 스킨통짜입니다.
psd파일은 메세지 이미지 원본입니다.(변경해 사용하세요)
img.tar는 메세지 이미지파일입니다.
미리보기주소 " http://www.daltan.net/bbs/register.php
패스워드미터만 적용하 실 분은 아래와 같이 적용해주세요 ^^;;
--------------------------------------------------------------------------------
01.스타일을 적용합니다.
--------------------------------------------------------------------------------
<style type="text/css">
/* 패스워드 미터 */
#barplus {position:relative;width:300px;}
#barplus #passwordStrength {position:absolute;top:1px;left:125px;}
#passwordStrength {position:relative;font-size:1px;height:18px;}
#passwordDescription {display:none;}//없어져라 호이~!!
.strength0,
.strength1,
.strength2,
.strength3,
.strength4,
.strength5 {font-size:1px;position:absolute;top:0px;left:-120px;width:178px;height:16px;}
.strength0 {background-image:url('<?=$member_skin_path?>/img/m1.gif');} /* 매우부족 */
.strength1 {background-image:url('<?=$member_skin_path?>/img/m2.gif');} /* 조금부족 */
.strength2 {background-image:url('<?=$member_skin_path?>/img/m3.gif');} /* 보통수준 */
.strength3 {background-image:url('<?=$member_skin_path?>/img/m4.gif');} /* 양호수준 */
.strength4 {background-image:url('<?=$member_skin_path?>/img/m5.gif');} /* 좋습니다 */
.strength5 {background-image:url('<?=$member_skin_path?>/img/m6.gif');} /* 매우좋음 */
.strength0t,
.strength1t,
.strength2t,
.strength3t,
.strength4t,
.strength5t {font-weight:bold;letter-spacing:-2px;font-size:8pt;display:none;}
.strength0t,
.strength1t {color:#ff0066;}
.strength2t,
.strength3t {color:#77a80f;}
.strength4t,
.strength5t {color:#4ab3d6;}
#passwordDescription {padding-left: 5px;}
</style>
--------------------------------------------------------------------------------
02.스크립트를 추가합니다.
--------------------------------------------------------------------------------
<script language="javascript">
function passwordStrength(password) { //이미지로 대체해서 글자는 나오지 않습니다.
var desc = new Array();
desc[0] = "<label class=\"strength0t\">매우부족</label>"; // 매우부족
desc[1] = "<label class=\"strength1t\">조금부족</label>"; // 조금부족
desc[2] = "<label class=\"strength2t\">보통수준</label>"; // 보통수준
desc[3] = "<label class=\"strength3t\">양호수준</label>"; // 양호수준
desc[4] = "<label class=\"strength4t\">좋습니다</label>"; // 좋습니다
desc[5] = "<label class=\"strength5t\">매우좋음</label>"; // 매우좋음
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
--------------------------------------------------------------------------------
03.패스워드부분을 아래와 같이 바꿉니다.
--------------------------------------------------------------------------------
<TR bgcolor="#FFFFFF">
<TD class=m_title>패스워드</TD>
<TD class=m_padding>
<div id="barplus"><INPUT class=m_text type=password name="mb_password" size=20 maxlength=20 <?=($w=="")?"required":"";?> itemname="패스워드" onkeyup="passwordStrength(this.value)" ><span id="passwordDescription"> </span><div id="passwordStrength"> </div></div>
</TD>
</TR>
--------------------------------------------------------------------------------
04.첨부이미지를 skin/member/스킨폴더/img 에 업로드 합니다.
--------------------------------------------------------------------------------
4
댓글 13개
그리고 너무 짜네요 ... 왠만큼 하면 좋다구 해주지 ㅎㅎㅎ 아주 길게 넣어도 조금 괜찮다고 하니 ㅡㅡ;
01. dakk2!ghldnjs^
02. \elc@me2dakk^ne
03. dakk?neips2one
요런식으루
(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )
요거 조합해서 쓰니,
"좋은암호입니다" 까지는 나오네요^^
줄이 밀리네요.
// document.getElementById("passwordDescription").innerHTML = desc[score];
<!--<span id="passwordDescription"> </span>-->
이렇게 코멘트 처리 하니 되네요.
요로케 하면 아예 숨겨버리니까
불당님이랑 같네요 ㅎㅎ
예쁜 스킨 감사합니다. 복 받으셔요 :)
(추천!)