본문 바로가기

기타 유용한 정보들/▩ 有用한 情報 및 잠깐 휴식을...

이미지 태그 효과 적용 소스

반응형
BIG

▣ 이미지 태그 효과 적용 소스 ▣

▷ 이미지에 위에 글자 올리기 : <table background="이미지 주소" width="가로 사이즈" height="세로 사이즈"><TR><TD>
▷ 전체 배경 이미지 지정 : <body background="이미지 주소">

① border : 테두리의 두께 지정
② hspace(Horzontal Space) : 좌, 우 여백
③ vspace(Vertical Space) : 상, 하 여백
⑤ alt = 이미지위에 마우스 올리면 말풍선
⑥ align=left : 이미지 옆에 글자쓰기
⑦ top : 상단과 글자의 윗 부분을 정렬
⑧ middle : 이미지의 중심과 글자의 밑 부분을 정렬
⑨ bottom : 이미지의 하단과 글자의 아래 부분을 정렬


● 이미지 효과 적용 소스

▷ 한쪽만 투명하게 : <img src="이미지 주소" style="filter=alpha(opacity=100,style=1,finishopacity=0)">
▷ 원형 : <img src="이미지 주소" style="filter=alpha(opacity=100,style=2,finishopacity=0)">
▷ 사각 : <img src="이미지 주소" style="filter=alpha(opacity=100,style=3,finishopacity=0)">
▷ 햇살 : <img src="이미지 주소" style="filter:blur(direction=135,strength=100)">
▷ 흑백 : <img src="이미지 주소" style="filter:gray()">


▷ 이미지 거꾸로 : <span style=filter:flipv();height:1px;><img src="이미지 주소"></span>

▷그림자 주기 : <img src="이미지 주소"
또는 <table background="이미지 주소" style="filter:progid:DXImageTransform.Microsoft.Shadow(color=#BCBCBC,Direction=150,Strength=10)">

▷ 문발 사이로 본 효과 : <IMG SRC="이미지 주소" style=filter:wave(add=1,freq=100,rightstrength=10,phase=50,strength=0)>
▷ 웨이브 : <img src="" style="Filter: Wave (Add=0, Freq=10, LightStrength=20, Phase=70, Strength=5)" border="0">
참고) Freq : 웨이브 횟수 / rightStrength : 밝기, 강도 / Phase : 웨이브 시작 / Strength : 물결의 정도

▷ 물결 효과 : <DIV style="FILTER: wave(strength=90, freq=1, lightstrength=50, add=0, phase=10); WIDTH: 790px; HEIGHT: 100px"><IMG src="이미지 주소"></DIV>

▷ 이미지 전체를 그림자 효과 : <img src="이미지 주소" style="filter:blur(direction=135,strength=100)">



※ 테이블 이미지에 안개 효과
<TABLE style="FILTER: alpha(opacity=100,style=3,finishopacity=0)" height="400" width="350" background="이미지 주소" border=0>


※ 전체배경 : <style> body { background-image:url("이미지 주소"); background-attachment: fixed; background-repeat: yes-repeat; background-position: up; } table { background-color: transparent; } td { background-color: transparent; } </style>


※ 배경 오른쪽 고정 :
<style type="text/css">
body {background:url(이미지 주소) fixed no-repeat right bottom }
</style>

▷ 배경 이미지 오른쪽 상단에 위치: right top
▷ 배경 이미지 오른쪽 하단에 위치: right bottom

참고) 오른쪽 상단에 고정 <IMG src="" align=right>



※ 글자 그네타기
<MARQUEE style="WIDTH: 604px; HEIGHT: 114px" scrollDelay=100 behavior!=alternate>
<IMG style="WIDTH: 89px; HEIGHT: 91px" height=188 src="이미지 주소" width=100><P>
<FONT color=#268F81 size=3>사랑해요</FONT></MARQUEE>



▣ 태그 효과 적용 소스 ▣


※ 글자 숨기기
<span style="background-color:#D9EFB9;"><font color="#D9EFB9"> 아자! 신나게 즐겁게 오~</font></span>


※ 글자 반짝 반짝
<marquee behavior!=alternate width=750 scrollamount=1000> 고맙습니다.</marquee>


※ 분사되는 효과의 반짝 반짝
<APPLET! Code=RotatingLines.class CodeBase="http://aaha.pe.kr/APPLET!/Line/" width=500 height=50><PARAM name=APPLET!TEXT value=" 좋은 하루 ^^ "></applet!>




※ 글자에 빛이 좌우 반복
<applet! codebase="http://www.geocities.com/Tokyo/4615/" code="HHHanCoolTitle.class" width="500" height="50"><param name="text" value="언제나 행복이 그대와 함께"><param name="textcolor" value=ffff00><param name="textstyle" value="Lydian"><param name="bgcolor" value=000031><param name="shiftTo" value="0000ff"><param name="isVacuum" value="5"><param name="delay" value="6"></applet!>


※ 인사창
opens : <body omload="alert!('메모');">
closes : <body omunload="alert!('메모');">
두 가지 동시 : <body omload="alert!('까꿍~!');" omunload="alert!('잘가~ㅋ');"></body>



※ 타오르는 불타는 밤
<APPLET! code=Fire.class width=350 height=70 codebase="http://mutant23.com.ne.kr/appletŋ/"><PARAM NAME="f3color" VALUE="0000ff"><PARAM NAME="font" VALUE="TimesRoman|b|40"><PARAM NAME="expower" VALUE="6"><PARAM NAME="power" VALUE="4"><PARAM NAME="color" VALUE="ffffcc"><PARAM NAME="target" VALUE="main"> <PARAM NAME="message" VALUE="불타는 밤 "></APPLET!>


※ 줄 귿기 : <hr noshade size="1" color=e5f1ff>

※ 테이블 바탕색 변화 소스 :
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#000000 , EndColorStr=sandybrown )" width=680 align=middle vAlign="center" TD>



◈ 마퀴 태그 ◈

<marquee>기본</marquee>

보기 : <marquee scrollamount="2" direction="down" behavior!="slide" scrollamount=3 scrolldelay=100 height=660>
▷ 방향 : direction="left"(왼쪽), direction="right"(오른쪽), direction="up"(위), direction="down"(아래)
▷ 속도 : scrollamount="1" 느리게(숫자가 높을수록 속도 향상)

▷ 위로 멈춤 : <marquee direction=up behavior!="slide" scrollamount=3 scrolldelay=100>
▷ 왼쪽으로 멈춤 : <marquee behavior!=slide scrollamount=2 scrolldelay=100>
▷ 위, 아래 왕복 : <marquee behavior!=alternate direction=up height=50><font color=green size=3>까꿍</font></marquee>
▷ 좌, 우 왕복
<marquee scrollAmount=1 behavior!=alternate direction=right width=350> 글쓰기 </marquee>
<marquee scrollamount=2 behavior!=alternate scrolldelay=120 width=768> 글쓰기 </marquee>



※ 전광판 효과

<center><APPLET! CODE="luminous.class" CODEBASE="http://ilovetag.cafe24.com/java/" WIDTH=520 HEIGHT=60>
<PARAM NAME="AUTHOR" VALUE="Virtual_Max (<a href=http://come.to/vmax) target=_blank>
http://come.to/vmax)</a>">
<PARAM NAME="BGCOLOR" VALUE="ffffff">
<PARAM NAME="TEXT0" VALUE="|FONT=TimesRoman COLOR=c00000 SIZE=17 STYLE=0 link=null START=FADE END=FADE| 행복하세요.">
<PARAM NAME="TEXT1" VALUE="|FONT=TimesRoman COLOR=ffc000 SIZE=17 START=FADE END=FADE link=null| 즐겁게 살아요.">
<PARAM NAME="TEXT2" VALUE="|FONT=TimesRoman COLOR=2000ff SIZE=17 START=SPIN END=SPIN| 건강은 꼭 잘 챙기고">
<PARAM NAME="TEXT3" VALUE="|FONT=TimesRoman COLOR=ff80ff SIZE=17 START=BLAST END=BLAST| 씩씩하게">
<PARAM NAME="TEXT4" VALUE="|FONT=TimesRoman COLOR=40a000 SIZE=17 START=ROLL END=ROLL| 바라는 일 잘 되기를 바래요.">
<PARAM NAME="TEXT5" VALUE="|FONT=TimesRoman COLOR=336699 SIZE=17 START=BLAST END=ROLL| 언제나 힘내고 즐거운 하루 "></APPLET!>

 

 

 

반응형
LIST