table 내용 엑셀로 저장하기

반응형
export.html

<?
header("Content-type: application/vnd.ms-excel");
header("Content-type: application/vnd.ms-excel;charset=KSC5601" );
header("Content-Disposition: attachment; filename=data.xls" );
header("Content-Description: PHP5 Generated Data" );
?>

<html>
<body>
<table>
  <tr><td width="50">1</td><td width="50">S</td></tr>
  <tr><td width="50">2</td><td width="50">Y</td></tr>
  <tr><td width="50">3</td><td width="50">S</td></tr>
  <tr><td width="50">4</td><td width="50">D</td></tr>
  <tr><td width="50">5</td><td width="50">O</td></tr>
  <tr><td width="50">5</td><td width="50">C</td></tr>
  <tr><td width="50">5</td><td width="50">U</td></tr>
</table>
</body>
</html> 



반응형

댓글()

[JavaScript] 이미지를 방향키로 움직일 수 있고, 좌표가 표시됩니다.

반응형

<Html>
<HEAD>
        <title>태그인넷 www.tagin.net</title>

<script language="javascript">
<!--
//********************************************************************
//*                  Please DO NOT delete this commant.              *
//*                                                                  *
//*             Designed by Jason.                                   *
//*             e-mail address: yulbum@yahoo.com                     *
//*             If you want to know about DHTML                      *
//*             Come here: http://members.tripod.com/~dyhtml         *
//*             Thank you!                                           *
//********************************************************************



function init() {
        moving = mov.style
        moving.xpos = parseInt(moving.left)
        moving.ypos = parseInt(moving.top)
        moving.move = 0
        moving.move2 = 0
        moving.move3 = 0
        moving.move4 = 0

        document.onkeydown = down
        document.onkeyup = up
  } 

// moving the object when key down

  function down() {
        var code = window.event.keyCode
        if (code == 39 && !moving.move) {
                moving.move = 1 
                move();
        }  
        if (code == 40 && !moving.move2) {
                moving.move2 = 1
                move2();
        }
        if (code == 37 && !moving.move3) {
                moving.move3 = 1
                move3();
        }  
        if (code == 38 && !moving.move4) {
                moving.move4 = 1
                move4();
        }

  }

// stop moving the object when key up

  function up() {
        var code = window.event.keyCode
        if (code == 39) {
                moving.move = 0
        }
        if (code == 40) {moving.move2 = 0}
        if (code == 37) {moving.move3 = 0}
        if (code == 38) {moving.move4 = 0}
  }

// Moving the object

  function move() {
        if (moving.move) {
                moving.xpos += 5
                moving.left = moving.xpos
                setTimeout ("move()",30)
        }
  }

  function move2() {
        if (moving.move2) {
                moving.ypos += 5
                moving.top = moving.ypos
                setTimeout ("move2()",30)
          }
  }

  function move3() {
        if (moving.move3) {
                moving.xpos -= 5
                moving.left = moving.xpos
                setTimeout("move3()",30)
           }
  }

  function move4() {
        if (moving.move4) {
                moving.ypos -= 5
                moving.top = moving.ypos
                setTimeout("move4()",30)
        }
  }

// position display

function s() {
        view.innerHTML = "X: "+moving.xpos+" Y: "+moving.ypos
        setTimeout ("s()",0)
}
//-->
</script>
</head>
<body onload="init();s()"  link="#7C7EE2" vlink="#C9CAF3">
<p>방향키로 그림을 움직일 수 있습니다. www.tagin.net 태그인넷</p>
<div id="mov" style="position:absolute; left:20; width:25; top:50">
<img src="http://tagin.net/img/logo.gif" border="1"></div>
<div id="view" style="position:absolute; top:100;"></div>
<div id="back" style="position:absolute; top:150;"><a></div>
</body>
</html>



[출처] 태그인넷 (http://tagin.net/bbs/view.php?id=js4&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=83)

반응형

댓글()

라디오버튼 클릭시 input 박스 활성화 시키기

반응형

<input type="radio" name="ip" value="<?=$ip?>" checked onClick="this.form.anotherip.disabled=true"> 접속자 IP

<input type="radio" name="ip" value="myip_no" onClick="this.form.anotherip.disabled=false"> IP 지정

<input type="text" name="anotherip" size="15" disabled>


input 박스 여러개를 활성화 해야 할 경우엔 아래와 같이 ; 로 구분하여 내용을 추가하면 됩니다.


onClick="this.form.anotherip.disabled=true; this.form.anotherip.disabled=true;"

onClick="this.form.anotherip.disabled=close; this.form.anotherip.disabled=close;"


반응형

댓글()

[javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경

반응형

<head> 와 </head> 사이에 입력

<script language="JavaScript">

<!--

pic0 = new Image();

pic0.src = "insert0.jpg";

pic1 = new Image();

pic1.src = "insert1.jpg";

pic2 = new Image();

pic2.src = "insert2.jpg";

pic3 = new Image();

pic3.src = "insert3.jpg";

// -->

</script>



<body> 와 </body> 사이에 입력

<table>

  <tr>

    <td>

<a href="" onmouseover="document.images.text.src=pic1.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="1.jpg" border="0"></a>

<a href="" onmouseover="document.images.text.src=pic2.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="2.jpg" border="0"></a>

<a href="" onmouseover="document.images.text.src=pic3.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="3.jpg" border="0"></a> 

    </td>

  </tr>


  <tr>

    <td id="textbox">

      <img src="insert0.jpg" name="text" border="0">

    </td>

  </tr>

</table>


1.jpg 나 2.jpg 나 3.jpg 에 마우스를 올리면 별도의 위치에 insert1.jpg, insert2.jpg, insert3.jpg 이미지가 뜹니다.

그리고 마우스가 위치를 벗어나면 insert0.jpg 기본 이미지 출력됩니다.


반응형

댓글()

[html] a 태그 밑줄 없애기

반응형

HTML의 a태그로 만들어진 링크에는, 기본적으로 항상 밑줄(Underline)이 붙습니다.

요즘에는 링크에서 밑줄을 지우는 것이 일반적입니다. 링크에서 밑줄을 삭제하려면

style="text-decoration:none"

이라는 스타일을 지정하면 됩니다. 또는 클래스를 만들어 지정해 주어도 됩니다.


그런데 text-decoration:none 을 지정해도, 아주 복잡한 웹페이지의 경우에는 링크가 없어지지 않는 경우가 있습니다. CSS 속성들이 서로 뒤엉켜 있기 때문입니다. 이때는

!important

이라는 (느낌표+important) 구문을 추가하여 강제로 지정해야 합니다. 다음 예제와 같습니다:

링크 텍스트에서, 언더라인(밑줄) 삭제 예제


파일명: example.html

<html>
<head>
<style type="text/css">

/* 링크에서 밑줄 없애기 */
a.no-uline { text-decoration:none }

/* 마우스 지나갈 때만 삭제 + 강제로 없애기 */
a.noul:hover { text-decoration:none !important }

</style>
</head>


<body>


<!-- 스타일을 직접 지정하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" style="text-decoration:none">Google 검색</a>


<br />


<!-- a.no-uline 클래스를 이용하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="no-uline">Google 검색</a>


<br />


<!-- 마우스를 가져갔을 때에만, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="noul">Google 검색</a>


</body>
</html>


▶▶ HTML-CSS] 마우스 가져갔을 때에만, 밑줄(언더라인) 표시; Mouse Hover Underline

모든 밑줄 한꺼번에 없애는 법: ▶▶ A태그에서 밑줄을 없애려면? 링크 언더라인 지우려면? Link Underline Remove


[출처] http://mwultong.blogspot.com/2007/02/html-css-links-without-underline.html

반응형

댓글()

[html] 테이블 테두리 얇게하기

반응형
<table width="100" height="50" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse; border:1px gray solid;">
  <tr>
    <td>내용</td>
  </tr>
</table>
 

 

반응형

댓글()

[html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정)

반응형

이미지와 문자의 높이를 맞춰주는 옵션입니다.

 

<img src="/images/sysdocu.png" align="absmiddle"> 내용


그래도 높이가 안맞을 경우 아래와 같이 이미지 하단 여백을 주어 맞출 수 있습니다.


<img src="/images/sysdocu.png" align="absmiddle" style="margin-bottom:8px"> 내용

반응형

댓글()

[html] 마우스 올려놓았을때 이미지 변경시키는 방법

반응형

<img src="sysdocu_off.gif" onmouseover="this.src='sysdocu_on.gif';" onmouseout="this.src='sysdocu_off.gif';">

 

sysdocu_off.gif 는 마우스 올리기전의 이미지이고

sysdocu_on.gif 는 마우스 올리면 변경될 이미지입니다.

 

반응형

댓글()

로그인 박스 안에 텍스트(이미지)넣기

반응형

네이버나 다음 등 포털 사이트들의 로그인 박스를 보면 박스안에 아이디/비밀번호 이런 글씨가 들어가 있고

클릭하면 사라졌다 클릭 해제하면 다시 나오는 효과를 볼수 있습니다.


 

일단 스타일부분 입니다. 아래소스를 페이지 head와 head 사이 또는 css 파일에 넣어주세요.

id_blur / id_focus 부분이 아이디 input 효과

pw_blur / pw_focus 부분이 비밀번호 input 효과입니다.

 

<style>
ol,ul,li {list-style:none;}
.id_blur { border:#ddd 1px solid; background: transparent url(bg.gif) no-repeat; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:14px; background-color:#f9f9f9;} 
.id_focus { border:#ddd 1px solid; background-color:#f9f9f9; color:#9e9e9e; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:15px; } 
.pw_blur {border:#ddd 1px solid; background: transparent url(bg2.gif) no-repeat; font-size:11px; font-family:돋움; width: 125px; height: 15px; line-height:15px; background-color:#f9f9f9;} 
.pw_focus { border:#ddd 1px solid; background-color:#f9f9f9; color:#9e9e9e; width: 125px; height: 15px; font-size:10px; line-height:15px;}
</style>

페이지에 들어갈 소스입니다.
원하는 위치에 이 소스를 넣어주시면 됩니다.
 

<ul >
  <li>
    <input type="text" name="txtUserId" onFocus="this.className='id_focus'" onBlur="if ( this.value == '' ) { this.className='id_blur' }"  class='id_blur' />
  </li>
  <li>
    <input type="password" name="txtUserPw" onFocus="this.className='pw_focus'" onBlur="if ( this.value == '' ) { this.className='pw_blur' }"  class='pw_blur' />
  </li>
</ul>

[출처] HSBN 향사발 (http://blog.naver.com/shadk18/10125136905)

반응형

댓글()

input 입력상자 사이즈 고정시키기

반응형

특히 type=password 일 경우 text 와 다르게 높이가 약간 높아지게 되는데

text 와 높이를 같게 하려면 아래와 같이 style 을 이용해 높이를 고정 시키면 됩니다.

 

<input type="password" name="password" style="width:120px;height:20px">

 

반응형

댓글()

쿠키를 이용한 팝업창 소스

반응형

==팝업창을 여는 페이지==

<script>

//팝업창 함수 정의

function popup()
{
 winopen=window.open('popup.html','winopen','width=팝업창 폭,height=팝업창 넓이,scrollbars=no');
}

//쿠키 검사 함수 정의

function getCookie(name)
{
       var prefix = name + "=";
       var cookieStartIndex = document.cookie.indexOf(prefix);
       if (cookieStartIndex == -1) return null;
       var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
       if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
       return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}

//쿠키가 존재하지 않으면 팝업창을 연다.

if(getCookie("쿠키이름")==null) 
{
 popup();
}

</script>

<html>

코딩...

</html>

 

 

==열릴 팝업창 소스==

<script>

//쿠키 생성 함수정의

function setCookie( name, value, expiredays ) 

var todayDate = new Date(); 
todayDate.setDate( todayDate.getDate() + expiredays ); 
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" 

}

 

//오늘하루이창보지않음 체크시 창을 닫고 쿠키를 생성

function closeWin() 

        setCookie( "쿠키이름", "done" , 1); 
        self.close(); 
}

</script>

<a href='javascript:closeWin('>오늘하루이창열지않음</a>

 

[출처] Programmer's My Dream.. | 철마신 (http://ljmgood123.blog.me/53109660)

반응형

댓글()