2010년 2월 5일 금요일

[자바스크립트] 왼쪽 or 오른쪽 영역 따라다니는 스크롤 배너 or 스크롤 이미지

슬라이드 스크롤 배너 more..



딱딱한 스크롤 배너 more..



2010년 1월 29일 금요일

[자바스크립트] POST 변수값 팝업창으로 넘기기

function my_popup(no) {
 open("", "mypop", "width=530, height=800"); // 먼저 빈 창을 mypop 라는 이름으로 열어놓고
    document.fwrite.action = "test_inp.php?no="+no; // 'test_inp.php' 를 fwrite이 실행될 action 으로 지정한다.
    document.fwrite.target = "mypop"; // 이 부분이 핵심! 열어놓은 빈 창(mypop)을 fwrite이 날아갈 target으로 정한다.
    document.fwrite.method = "post"; // target에 submit할 방식을 post 방식으로 지정한다.
    document.fwrite.submit(); // target에 쏜다.
}

[자바스크립트] 이미지롤오버 + 클릭 탭 네비게이션

간단하다면 간단하고 어렵다면 어려워보였던 탭 네비게이션.. 
이미지롤오버와 더불어 클릭시 탭마다 다른 내용의 테이블이 보여지는 네비게이션을 코딩해보았습니다.
핵심은 태그마다 id값이 들어가고, getElementId로 컨트롤한다는 것..

<!-- 이미지에 이미지맵을 입히고 -->
<img id="popup1" src="images/top1.jpg" width="885" height="784" border="0" usemap="#Map">       <input type="hidden" name="id_tmp" id="id_tmp">

<!-- 롤오버 및 클릭시 페이지변환없이 관련 테이블 내용 보여지는 관련 자바스크립트 -->
     <script>
     function click_start(id) {
      document.getElementById('id_tmp').value = id;

      //롤오버 정보 초기화
      for(var i=1; i<6; i++ )
      {
       document.getElementById('btn'+i).src='images/btn'+i+'.gif'
       document.getElementById('btn'+i+'_tb').style.display='none';
      }

      document.getElementById(id+'_tb').style.display='';
      rollOverImg(id);
     
     }
     
     function rollOverImg(id){
      document.getElementById(id).src='images/'+id+'r.gif'
     }
     
     function rollOutImg(id){
      if(document.getElementById('id_tmp').value == id)
       return;
      else
       document.getElementById(id).src='images/'+id+'.gif'      
     }
     </script>

<!-- 네비게이션 탭 테이블 -->
       <table width="800" border="0" cellspacing="0" cellpadding="0" style="margin-left:10px;">
        <tr>
         <td><img id="btn1" src="/promotion/201002/jejutour/images/btn1.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn2" src="/promotion/201002/jejutour/images/btn2.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn3" src="/promotion/201002/jejutour/images/btn3.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn4" src="/promotion/201002/jejutour/images/btn4.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn5" src="/promotion/201002/jejutour/images/btn5.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
        </tr>
       </table>

<!-- 실험대상 테이블 -->
<!-- 한 행 tr태그마다 id값을 줘야한다. -->

<table>
     <tr id="btn1_tb">
      <td>1</td>
     </tr>
     <tr id="btn2_tb" style="display:none">
      <td>2</td>
     </tr>
     <tr id="btn3_tb" style="display:none">
      <td>3</td>
     </tr>
     <tr id="btn4_tb" style="display:none">
      <td>4</td>
     </tr>
     <tr id="btn5_tb" style="display:none">
      <td>5</td>
     </tr>
   </table>


 

2010년 1월 27일 수요일

[PHP] 폼메일 전송시 한글 깨짐 현상 해결방법



   $charset='UTF-8'; // 문자셋 : UTF-8
   $subject=$subject; // 제목
   $toName='홍길동'; // 받는이 이름
   $toEmail= $to; // 받는이 이메일주소
   $fromName=$cok_name; // 보내는이 이름
   $fromEmail=$cok_mail; // 보내는이 이메일주소
   $body=$content; // 메일내용
   $body = iconv('utf-8', 'euc-kr', $body);  //본문 내용 UTF-8화
   $encoded_subject="=?".$charset."?B?".base64_encode($subject)."?=\n"; // 인코딩된 제목
   $to= "\"=?".$charset."?B?".base64_encode($toName)."?=\" <".$toEmail.">" ; // 인코딩된 받는이
   $from= "\"=?".$charset."?B?".base64_encode($fromName)."?=\" <".$fromEmail.">" ; // 인코딩된 보내는이

   $headers="MIME-Version: 1.0\n".
   "Content-Type: text/html; charset=".$charset."; format=flowed\n".
   "To: ". $to ."\n".
   "From: ".$from."\n".
   "Return-Path: ".$from."\n".
   "Content-Transfer-Encoding: 8bit\n"; // 헤더 설정

   mail( $to , $encoded_subject , $body , $headers ); // 메일 보내기

출처 : Tong - 웹프로그램창고님의 PHP통


[자바스크립트] 키입력으로 텍스트박스의 이동



키 입력으로 텍스트 박스를 이동시킬때 쓰는 스크립트

주민등록번호나 전화번호등의 길이가 정해진 텍스트박스에 사용하면 좋을듯.

예제)

주민등록번호 -

사용스크립트)

    <script type="text/javascript">

        // 숫자만 입력가능

        function fn_onlyNum(frm, value) {

            if (

        (event.keyCode >= 48 && event.keyCode <= 57) ||

        (event.keyCode >= 96 && event.keyCode <= 105) ||

        (event.keyCode >= 37 && event.keyCode <= 40) ||

        event.keyCode == 9 ||

        event.keyCode == 8 ||

        event.keyCode == 46 || event.keyCode == 109 || event.keyCode == 189

        ) {

                //48-57(0-9)

                //96-105(키패드0-9)

                //8 : backspace

                //46 : delete key

                //9 :tab

                //37-40 : left, up, right, down

                //109,189 : -

                event.returnValue = true;

            }

            else {

                //alert('숫자만 입력 가능합니다.');

                //frm.value = "";

                event.returnValue = false;

            }

        }

   

        // 숫자와 엔터키만 입력가능

        function fn_onlyNumOrEnter(frm, value) {

            if (

        (event.keyCode >= 48 && event.keyCode <= 57) ||

        (event.keyCode >= 96 && event.keyCode <= 105) ||

        (event.keyCode >= 37 && event.keyCode <= 40) ||

        event.keyCode == 9 ||

        event.keyCode == 8 ||

        event.keyCode == 46 ||

        event.keyCode == 13

        ) {

                //48-57(0-9)

                //96-105(키패드0-9)

                //8 : backspace

                //46 : delete key

                //9 :tab

                //37-40 : left, up, right, down

                event.returnValue = true;

            }

            else {

                //alert('숫자만 입력 가능합니다.');

                //frm.value = "";

                event.returnValue = false;

            }

        }

        // 텍스트 박스 다음 포커스 이동

        function fn_NextFocus(obj_id, targetobj_id, obj_maxlength) {

            if (event.keyCode != 8 && event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 46) {

 

                var txtStart = document.getElementById(obj_id);

                var txtEnd = document.getElementById(targetobj_id);

 

                if (txtStart.value.length >= obj_maxlength) {

                    txtEnd.focus();

                }

            }

        }

        // 텍스트 박스 이전 포커스 이동

        function fn_PreviousFouse(obj_id, targetobj_id) {

 

            var obj = document.getElementById(obj_id);

            var target_obj = document.getElementById(targetobj_id);

 

            if (event.keyCode == 8 && obj.value.length == 0) {

                target_obj.focus();

                target_obj.value = target_obj.value;

            }

        }

    </script>


사용방법)

onkeydown="fn_onlyNum(this, this.value);fn_NextFocus(this.id, 'tbxMinbun2', 6);"

onkeydown="fn_onlyNum(this, this.value);fn_PreviousFouse(this.id, 'tbxMinbun1');"

 

한글인 경우 써지는 버그가 있다. 그럴경우엔 이걸 넣어주면된다.

style="ime-mode:active" 한글모드

style="ime-mode:inactive" 영문모드

style="ime-mode:disabled" 오직영문모드

2010년 1월 26일 화요일

[자바스크립트] 이미지 맵 마우스 커서 변경하기



<img id="popup1" src="/contents/img/c4-3_title2bg.gif" border="0" usemap="#Map" style="margin-bottom:30px;" />

<map name="Map" id="Map">
    <area shape="rect" coords="38,248,331,487" onmouseover="popup1.style.cursor='hand';" onmouseout="popup1.style.cursor='auto';" onclick="javascript:OpenImage('/contents/img/26_course.jpg');" />
</map>

[PHP] PHP로 HTML 폼메일 이메일 전송하기

<?
$name = "이름변수";
$sex = '성별변수';
$email = '보내는 사람 이메일';
$subject = "제목입니다";
$contents = "내용입니다 내용이예요";


$tomail = "lucael@naver.com"; //이 폼메일을 받을 메일주소

function error($text){
echo "
  <script language=javascript>
  window.alert('$text')
  history.go(-1)
  </script>";
exit;
}

function msg($text){
echo "
  <script language=javascript>
  window.alert('$text')
  top.location.href = 'http://gogoflow.com/index2.php'
  </script>
";
exit;
}

if (!$name) {error('성명을 적어주세요');} // 이름이 없을때 에러 메세지
if (!$sex) {error('성별을 선택해 주세요');}
if (!$email) {error('메일 주소를 적어주세요');} // 메일주소가 없을때 에러 메세지
if (!$subject) {error('제목을 적어주세요');} // 제목이 없을때 에러 메세지

$mailheaders = "Return-Path: $email \r\n"; // 메일 헤더의 반송 메일 주소
$mailheaders .= "From: $name <$email>\r\n"; // 메일헤더의 이름과 메일 주소 표시

$body = " 이름 : $name \r\n";
$body .= " 메일주소 : $email \r\n";
$body .= " 성별 : $sex \r\n";
$body .= " 전화 : $tel \r\n";
$body .= " 내 용 : $content \r\n";

$result=mail($tomail , $subject , $body , $mailheaders); // 메일 전송

if($result) {msg('메일이 성공적으로 발송되었습니다.');} // 전송 성공시

else{error('메일 발송에 실패하였습니다.');} // 전송 실패시

?>