투명한 테이블
<table bgcolor="#ffffff" style="filter:alpha(opacity=80)">
<tr>
<td>여기는 투명테이블</td>
</tr>
</table>
테이블 안에 style="filter:alpha(opacity=80)" 만 추가하면 흰색의 테이블 배경색을
포함한 테이블 전체가 투명해지면서 테이블 뒤의 배경이 보입니다.
(opacity=80) 에서 80은 투명도를 결정합니다. 낮은 수일수록 투명에 가까워집니다
(0~100 까지 가능).
=======================================================
스타일로 그리디에디션효과주기
의 원하는 위치에 아래처럼 테이블을 만들고 <table>태그 안에 style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B1C7F9, EndColorStr=#EEF2FC)" 를 추가합니다.
<table style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B1C7F9, EndColorStr=#EEF2FC)">
<tr>
<td>내용</td>
</tr>
</table>
0 은 그라데이션의 타입.
0은 수직그라데이션으로 그라데이션효과가 상하방향로 표현됩니다. 1은 수평그라디에션으로 그라데이션효과가 좌우방향으로 표현됩니다.
#B1C7F9는 그라디에션이 시작되는 지점의 색, #EEF2FC는 그라데이션이 끝나는 지점의 색입니다.
<table>태그가 아닌 다른 태그 안에도 적용해보세요^_^
참고로, 문서 전체에 그라데이션을 넣고자 한다면, 아래처럼 하시면 됩니다.
<body style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B1C7F9, EndColorStr=#EEF2FC)">
=================================================================
이미지 체인징효과
의 원하는 위치에 아래 소스를 넣습니다.
<script language="JavaScript">
<!--
var picture1="kissofgod01.jpg"
var picture2="kissofgod02.jpg"
var picturewidth=300
var pictureheight=200
//-->
</script>
<script language="JavaScript">
<!--
if (document.all) {
document.write('<OBJECT ID="DAControl_Wipe" ')
document.write('STYLE="width:'+picturewidth+';height:'+pictureheight+'"')
document.write('CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">')
document.write('</OBJECT>')
m = DAControl_Wipe.MeterLibrary;
whatTransformation = new ActiveXObject("DXImageTransform.Microsoft.Wipe");
whatPictures = new Array();
whatPictures[0] = m.ImportImage(picture1);
whatPictures[1] = m.ImportImage(picture2);
forward = m.Interpolate(0, 1, 3);
back = m.Interpolate(1, 0, 3);
whatMovement = m.Sequence(forward, back).RepeatForever();
whatTransformation.GradientSize = 1.0;
whatTransformation.WipeStyle = 0;
theResult = m.ApplyDXTransform( whatTransformation, whatPictures, whatMovement );
DAControl_Wipe.Image = theResult.OutputBvr;
DAControl_Wipe.Start();
}
//-->
</script>
kissofgod01.jpg 와 kissofgod02.jpg 는 이미지체인징효과에 사용할 그림의 이름.
300 과 200 은 이미지체인징효과가 일어나는 범위(그림의 가로 세로크기에 맞춰주시면 되겠죠)
forward = m.Interpolate(0, 1, 3); 에서 3은 오른쪽방향( → ) 속도
back = m.Interpolate(1, 0, 3); 에서 3은 왼쪽방향 ( ← ) 속도입니다. 큰 수일수록 느려집니다.
===========================================================
화면에 눈내리는 효과
에 아래 소스를 넣습니다.
<script language="JavaScript1.2">
<!--
var no = 15 ;
var speed = 5 ;
var snowflake = "snow.gif";
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 1024, doc_height = 768;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"position: ");
document.write("absolute; z-index: "+ i +"; visibility: ");
document.write("visible; top: 15px; left: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"position: ");
document.write("absolute; z-index: "+ i +"; visibility: ");
document.write("visible; top: 15px; left: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-10) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// -->
</script>
15 는 화면에 나타날 이미지의 숫자
5 은 눈 내리는 속도 (큰 수일수록 속도 느려짐)
snow.gif 은 이미지의 경로 및 이름.
|
|
|
통합자료
132
7
5
테그연습 스타일 2004-08
