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('메일 발송에 실패하였습니다.');} // 전송 실패시

?>

2010년 1월 22일 금요일

[자바스크립트] 마우스 롤오버시 커서 변경



이미지파일에 자바스크립트 onclick으로 링크를 걸었을 경우,
onMouseOver="this.style.cursor='hand'" 를 쓰거나
style="cursor:hand;" 를 써서 마우스커서를 손모양으로 바꾼다.

1. 기본적인 이미지맵 속성을 이용한 방법

이미지맵은 특성상 링크되는 부분에서 자동적으로 커서가 손모양으로 바뀝니다.

그러나 href속성이 아닌 onclick 이벤트를 이용하는 경우(속성이 아닌 이벤트)

손모양 커서는 나타 나지 않습니다. 따라서 이벤트가 아닌 href속성을 그대로

이용하시면 링크 부분에서 따로 설정없이 손모양이 나타나는것을 보실수

있습니다.

적어주신 소스를 변경한다면 아래와 같이 해주시면 해결 될듯 합니다.

예)
<area shape="rect" coords="456, 29, 557, 49" href="javascript:window.open('링크주소','window','location=no, directories=no, resizable=no,status=no,toolbar=no,menubar=no, width=600, height=500,left=200, top=80, scrollbars=no');return false" onfocus='this.blur()' target="_blank">

단, 사용자가 커서를 지정할수 없으며 오로지 손모양의 커서만 가능합니다.

2. DHTML 을 이용하는 경우 (IE전용)

이경우에는 좀더 다양하게 커서를 이용할수 있으며 속성이든 이벤트던 가리지

않고 스타일이 적용됩니다.

우선 이미지에 id 값을 넣어주시고 map에서 area 설정때 mouseover 이벤트와

mouseout 이벤트에 커서 스타일을 지정해 주시면 됩니다.

예)
<BODY>
<IMG USEMAP="#SystemMap" SRC="이미지주소" BORDER="0" ALT="" id="xxx">
</BODY>
<MAP NAME="SystemMap">
<area shape="rect" coords="0, 0, 50, 50" onclick="window.open('링크주소','xwindow','width=600, height=500,left=200, top=80');return false" onfocus='this.blur()' target="_blank" onmouseover="xxx.style.cursor='help'" onmouseout="xxx.style.cursor='auto'">
</MAP>

2010년 1월 6일 수요일

[자바스크립트] 이미지 사이즈 자동조절 팝업창


※ 이미지는 큰사진 하나만 있으면 됩니다.


<head>안에

<script language='javascript' type='text/javascript'>
<!--
/***********************************
/ 이미지 사이즈에 맞게 새창띄우기
/***********************************/
function OpenImage(s){

        srcImg = new Image();
        clientWidth = screen.width;
        clientHeight = screen.height;
        srcImg.src = s;
 
        var srcFileName = srcImg.src.substr(srcImg.src.lastIndexOf("/")+1, srcImg.src.length);

        win = window.open("","","width=15,height=15,scrollbars=no,resizable=no,left="+(clientWidth/2-15)+",top="+(clientHeight/2-15)+"");
        win.document.writeln("<html>");
        win.document.writeln("<head>");
        win.document.writeln("<title></title>");
        win.document.writeln("</head>");
        win.document.writeln("<body style='margin:0px;' bgcolor='#333333'>");
        win.document.writeln("<table border='0' cellpadding='0' cellspacing='0' style='cursor:hand' onclick='self.close()'>");
        win.document.writeln(" <tr>");
        win.document.writeln("  <td align='center'><img src="+s+" name='winImg' style='cursor:hand' onclick='self.close()' alt='클릭하면 사라집니다'></td>");
        win.document.writeln(" </tr>");
        win.document.writeln("</table>");
        win.document.writeln("</body>");
        win.document.writeln("</html>");

        srcImg = win.document.winImg;

        while(true)
                if(srcImg.readyState == "complete")
                        break;
       

        var winWidth = srcImg.width+10;
        var winHeight = srcImg.height+29;

        var left = (clientWidth/2)-(srcImg.width/2);
        var top = (clientHeight/2)-(srcImg.height/2);
        if(clientWidth <= srcImg.width){
                winWidth = clientWidth;
                left = 0;
                win.document.body.scroll = "auto";
        }
        if(clientHeight <= srcImg.height){
                winHeight = clientHeight-30;
                top = 0;
                win.document.body.scroll = "auto";
        }

        win.moveTo(left, top);
        win.resizeTo(winWidth, winHeight);
}
//-->
</script>



<body>~</body>사이

'그림'을 클릭할경우

<img src="그림경로" onclick="OpenImage(this.src)">


'text' 에 링크 할 경우

<a href="#" onclick="OpenImage('큰이미지')"  width="작은그림가로" height="작은그림세로">크게보기</a>

추천 오디오 변환 컨버터 주소 링크



아래 주소를 가면 볼수 있습니다.
http://blog.naver.com/newlynux?Redirect=Log&logNo=140021488196