2009년 7월 22일 수요일

javascript location url 페이지이동

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script>

function goTopjang(){
location.replace("http://www.topjang.co.kr/campaign/T2009070301/page/549001_2/main.jsp");

// location.replace("이동할 주소url");  

//  또는

// location.href("이동할 주소url");  
}
</script>


</head>

<body onLoad="javascript:goTopjang();">  //페이지 로드시 해당 스크립트 실행

 

</body>
</html>

 

참조 //////////////////////////////////////////////////////////////////////////

 location.replace("이동할 주소url");      <--  이동한뒤 이전주소가 남지 않고 이동됨

 location.href("이동할 주소url");   <--  이동한뒤 이전주소가 보임

 

보안상 보여지지 말아야 할때 와 아닐때로 구분하여 사용하면 될 것 같음


 


 

2009년 7월 21일 화요일

png이미지 배경투명 ie6

 

아래 코딩 조건은 페이지에 png이미지 경로를 보여져야 하고

main.css 에서 background로 하지않는 경우에 사용되는 방법임..

 

 

 

main.css====================================================

<style>

/*png 투명하게 하기 ie6*/
.png24 {tmp:expression(setPng24(this));}
.couponLayer02_CstmRe { position:relative; display:; width:224px; height:98px; border:0px solid red;}
.couponLayer02_CstmRe img { border:0;}
.couponLayer02_Cstm { position:absolute;}
.couponLayer02_CstmClose {position:absolute; left:200px; top:10px; width:auto height: 14px;height: 18px;}

</style>

 

 

 

 

 

ie7부터는 아래와 같이 페이지에 스크립트를 넣지 않아도 투명이 됨

ie6에서 png 투명이 안됨

 

<html>==========================================================

<head>

<link href="main.css" rel="stylesheet" type="text/css"> <!-- main.css 링크 -->

<script type="text/javascript">

//ie6에서 png투명하게 하기
    function setPng24(obj) {
     obj.width=obj.height=1;
     obj.className=obj.className.replace(/\bpng24\b/i,'');
     obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
     obj.src='';
     return '';
 }
</script>

</head>

<body>

 

<div id="nCstmLay" class="couponLayer02_CstmRe">
<div class="couponLayer02_Cstm">
<a href="http://book.interpark.com/event/EventPremiumNewApplicant.do?_method=NewMemberEventMain" target="_blank">
<img class="png24" src="https://sslbimage.interpark.com/images/bg_cupon03_nCstm.png"/></a></div>
<div class="couponLayer02_CstmClose"><img onClick="javascript:document.all.nCstmLay.style.display='none'" src="https://sslbimage.interpark.com/images/cupon03_nCstm_close.jpg"/></div>
</div>

 

 

</body>

</html>

 

 

 

 

2009년 7월 16일 목요일

이미지 순서대로 롤링(rolling)

이미지를 순서대로 롤링하는 자바스크립트입니다

 

 

순서가있는 배너 형태로 이미지 롤링 스크립트입니다.

 

 

 

/////////html document

 

 

<SCRIPT LANGUAGE="JavaScript">
<!--
//이미지 순서대로

var rollCnt=0;
function rollImage()
{
  var roll= document.all("rolID");

  if(roll==undefined || roll==null){
   return;
  }
  if(roll.length==undefined)
  {
   roll.style.display = "block"; 
   return;
  }
 
  for(var i = 0 ; i < roll.length ; i++)
  {  
   if(i == rollCnt) {
    roll[i].style.display = "block"; 
    continue ;
   } 
   roll[i].style.display = "none";
 
  }

  rollCnt++;
 
  if(rollCnt==roll.length){
   rollCnt=0;
  }
   // 시간 간격 주기 (1초)
  setTimeout('rollImage()','1000');
}


//-->
</SCRIPT>

 

 

 

<body>

 

<img id="rolID" src="http://~~~.com "/>

<img id="rolID" src="http://~~~.com "/>

<img id="rolID" src="http://~~~.com "/>

<img id="rolID" src="http://~~~.com "/>

 

 

 

위처럼 이미지에 id="rolID" 만 넣으면 위부터 순차적으로 이미지 롤링 됨

 

2009년 7월 2일 목요일

word-break:break-all & white-space:nowrap

1. word-break:break-all;

하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 단위로 끊어주는 역할을 하는 스타일 속성입니다.
기본적으로 <td></td> 안에서 문장은 띄어쓰기 공백을 기준으로 잘리기 때문에 width크기를 지정해 주더라도 width 크기를 무시하고 늘어나게 됩니다.
이런 경우, 문자 단위로 끊어주면 자동으로 width에 맞춰 줄바꿈이 됩니다.

2. word-break:keep-all;

1번과 비슷하나 문자가 아닌 단어 단위로 끊어주는 역할을 하는 속성입니다.

3. white-space:nowrap;

1번과 반대로 셀의 너비를 지정했다 하더라도 자동으로 줄바꿈이 되지 않게 하는 속성입니다.

나. 데모

1. word-break:break-all;

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

2. word-break:keep-all;

전지현 전지

현 전지현 전

지현 전지현 전지현

전지현

전지현

전지현

전지현

전지현

전지현

3. white-space:nowrap;

전지현 전지

현 전지현 전

지현 전지현

전지현

전지현 전지현 전지현 전지현 전지현 전지현

다. 소스

<table border="1" style="width:100px;"><tr><td>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</td></tr></table><p>

<table border="1" style="width:100px;"><tr><td style="word-break:break-all;">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</td></tr></table><p>

<table border="1" style="width:100px;"><tr><td>
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table><p>

<table border="1"  style="width:100px;"><tr><td style="word-break:keep-all;">
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table>

<table border="1" style="width:100px;"><tr><td>
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table><p>

<table border="1"  style="width:100px;"><tr><td style="white-space:nowrap;">
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table>

2009년 6월 23일 화요일

html 문서 내 js파일 삽입 스크립트

// HTML Document

<script>
//html 내 js 삽입

document.write("<SCR" + "IPT language=\"JavaScript\" src=\"http://~~/layer.js\"></SCR" + "IPT>");
</script>

 

 

// JavaScript Document

document.write("<style>");

document.write("<div>");
document.write("<a href=\"http://~~~.com\">아토피</a>");

document.write("</div>");

iframe onload시 크기조정

원하는 사이즈 고정

<iframe src="http://~~~~.com" align="center" scrolling="no" frameborder="no" name=frame_name onLoad="this.style.height=220;this.style.width=476"></iframe>

 

 

문서 body 높이

<iframe src="http://~~~~.com" align="center" scrolling="no" frameborder="no" name=f_name onLoad="this.style.height=f_name.document.body.scrollHeight""></iframe>