패스워드미터를 이미지로 대체해봤습니다. [또수정] 080424 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

패스워드미터를 이미지로 대체해봤습니다. [또수정] 080424 정보

패스워드미터를 이미지로 대체해봤습니다. [또수정] 080424

첨부파일

img.tar (12.0K) 55회 다운로드 2008-04-24 03:31:47
message.psd (271.3K) 7회 다운로드 2008-04-24 03:31:47

본문

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개

/skin/member/basic/img/ 에 이미지를 업로드 하셔야 합니다!
그리고 너무 짜네요 ... 왠만큼 하면 좋다구 해주지 ㅎㅎㅎ 아주 길게 넣어도 조금 괜찮다고 하니 ㅡㅡ;
으음,

    01. dakk2!ghldnjs^
    02. \elc@me2dakk^ne
    03. dakk?neips2one

요런식으루
(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )
요거 조합해서 쓰니,

"좋은암호입니다" 까지는 나오네요^^
http://www.sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=90316
줄이 밀리네요.

//  document.getElementById("passwordDescription").innerHTML = desc[score];
<!--<span id="passwordDescription">&nbsp;</span>-->
이렇게 코멘트 처리 하니 되네요.
전체 17 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT