♣컴배우기♣

♣이미지 태그 적응 소스 ♣

후루지아 2008. 8. 12. 19:41

이미지 태그 효과 적용 소스


▷ 이미지에 위에 글자 올리기 : <table background=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" width="가로 사이즈" height="세로 사이즈"><TR><TD>
▷ 전체 배경 이미지 지정 : <body background=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소">

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


● 이미지 효과 적용 소스

▷ 한쪽만 투명하게 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style="filter=alpha(opacity=100,style=1,finishopacity=0)">
▷ 원형 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style="filter=alpha(opacity=100,style=2,finishopacity=0)">
▷ 사각 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style="filter=alpha(opacity=100,style=3,finishopacity=0)">
▷ 햇살 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style="filter:blur(direction=135,strength=100)">
▷ 흑백 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style="filter:gray()">


▷ 이미지 거꾸로 : <span style=filter:flipv();height:1px;><img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소"></span>

▷그림자 주기 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소"
또는 <table background=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style="filter:progid:DXImageTransform.Microsoft.Shadow(color=#BCBCBC,Direction=150,Strength=10)">

▷ 문발 사이로 본 효과 : <IMG SRC=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style=filter:wave(add=1,freq=100,rightstrength=10,phase=50,strength=0)>
▷ 웨이브 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 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=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소"></DIV>

▷ 이미지 전체를 그림자 효과 : <img src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" style="filter:blur(direction=135,strength=100)">



※ 테이블 이미지에 안개 효과
<TABLE style="FILTER: alpha(opacity=100,style=3,finishopacity=0)" height="400" width="350" background=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" 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=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif align=right>



※ 글자 그네타기
<MARQUEE style="WIDTH: 604px; HEIGHT: 114px" scrollDelay=100 behavior=alternate>
<IMG style="WIDTH: 89px; HEIGHT: 91px" height=188 src=http://img.yahoo.co.kr/blank.gif href="http://img.yahoo.co.kr/blank.gif">http://img.yahoo.co.kr/blank.gif 주소" 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=APPLETTEXT value=" 산들바람 입니다. "></applet>


※ 색다른 화면 이동하기
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=4, Transition=23)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=4, Transition=23)"></meta></meta>


※ 글자에 빛이 좌우 반복
<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/applet1/"><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>


'♣컴배우기♣' 카테고리의 다른 글

♣움직이는 앨범 ♣  (0) 2008.08.19
♣글자 모양 소스 ♣  (0) 2008.08.12
태그자료 100가지  (0) 2008.08.11
♣엑셀 워드베우기 ♣  (0) 2008.07.30
♣엑셀기본 다지기,♣  (0) 2008.07.29