아래 스크립트는 하나의 이미지에서 글자가 튀어나오게 하는 스크립트입니다. 자신이 원하는 글자를 튀어나오게 할 수 있으며, 여러 설정을 변경할 수 있습니다.
다음을 <HEAD></HEAD> 사이에 넣습니다. 아래 내용은 사실, 넣지 않아도 무방합니다.
<style type="text/css">
body
{background-color:#ffffff;
font-family: Arial;
font-size:7pt; }
</style>
다음을 <BODY onload="init()"></BODY> 사이에 넣습니다.
<script>
//<!--Change this text-->
text=new Array('안녕하세요','지금','글자가','튀어나옵니까?','여러분도','응용해보세요.')
// <!--튀어나올 글자 설정(개수 제한이 없습니다.)-->
//<!--This is the number of words in your message-->
var numText=6 // <!--위에서 설정한 텍스트 개수만큼 설정-->
//<!--These are the colors the last word will fade to. The first color is the main color.-->
color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')
//<!--This is the total number of colors from above.-->
var numColors=5
//<!--This is the size you want the zoom to end at.-->
var endSize=70
//<!--This is the speed you want it to zoom in.-->
var Zspeed=30
//<!--This is the speed the colors will fade.-->
var Cspeed=200
//<!--This is the font of the fade in message.-->
var font='Arial Black'
//<!--This will allow you to have the message stay
// <!--기타 값들의 설정도 바꾸어 보십시오.-->
// or go. True will make it go.
// False will make it stay.-->
var hide=false
var size=10
var gonum=0
var ie, n;
if (document.all) {
n=0
ie=1
zoomText='document.all.zoom.innerText=text[num]'
zoomSize='document.all.zoom.style.fontSize=size'
closeIt=""
fadeColor="document.all.zoom.style.color=color[num]"
}
if (document.layers) {
n=1;ie=0
zoomText=""
zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"
closeIt="document.zoom.document.close()"
fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-1]+'</p>')"
}
function zoom(num,fn){
if (size<endSize){
eval(zoomText)
eval(zoomSize)
eval(closeIt)
size+=5;
setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
}else{
eval(fn);
}
}
function fadeIt(num){
if (num<numColors){
eval(fadeColor)
eval(closeIt)
num+=1;
setTimeout("fadeIt("+num+")",Cspeed)
}else{
hideIt()
}
}
function hideIt(){
if(hide){
if(ie)document.all.zoom.style.visibility="hidden"
if(n)document.layers.zoom.visibility="hidden"
}
}
function init(){
if(ie){
document.all.zoom.style.color=color[0]
document.all.zoom.style.fontFamily=font
}
if(ie || n) go(0)
}
function go(num){
gonum+=1
size=10
if(num<numText){
zoom(num,'go('+gonum+')')
}else{
fadeIt(0)
}
}
</script>
<img src="kiki.jpg" width="200" height="250" alt="공사중입니다!">
<!--이곳에 원하는 이미지를 설정합니다. -->
<P>
<div id="zoom" align="center" style="position:absolute; top:150">
</DIV>
'Tech: > HTML·DHTML' 카테고리의 다른 글
| 까만 밤에 환한 플래쉬 비추기 효과 (0) | 2008.06.26 |
|---|---|
| 페이지 내용안의 이미지 바꾸기 (0) | 2008.06.26 |
| 페이지가 커튼처럼 열린다! (0) | 2008.06.26 |
| 시간 컨트롤: 방문시각에 맞춘 인삿말 (0) | 2008.06.26 |
| 링크 클릭시 메인페이지 바꾸기 (0) | 2008.06.26 |
