메뉴에 타이포그래픽 효과를 낼 수 있는 멋진 소스입니다.
타이포그래픽이란 말 그대로 글자로 멋진 그래픽 효과를 내는 것인데요,
이 소스를 사용하면 포토샵같은 어려운 그래픽 프로그램을 사용하지 않고도 그에 버금가는 멋진 효과를 낼 수 있답니다.
<head>부분과 <body> 두 부분에 소스를 아래의 설명대로 첨가해 주시면 됩니다.
(맨 아래 예제파일을 첨부해 놓았으니 실행해 보세요~!-마우스를 메뉴텍스트 위에 올려놓아보시면 효과가 나타납니다)
1. <head>아래에 다음과 같은 소스를 넣습니다.
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
<script>
<!-- Beginning of JavaScript -
var message
var ismouseover=0
var obj = new Array()
var repeater = 30
var i_span=0
var pause=20
var textfont=new Array()
textfont[0]="Times"
textfont[1]="Arial Black"
textfont[2]="Arial Narrow"
textfont[3]="Verdana"
textfont[4]="Courier"
var textstyle=new Array()
textstyle[0]="normal"
textstyle[1]="italic"
textstyle[2]="normal"
textstyle[3]="italic"
var textcolor= new Array()
textcolor[0] ="FEFEFF"
textcolor[1] ="FDFDFF"
textcolor[2] ="FAFAFF"
textcolor[3] ="F5F5FF"
textcolor[4] ="F3F3FF"
textcolor[5] ="EEEEFF"
textcolor[6] ="ECECFF"
textcolor[7] ="E9E9FF"
textcolor[8] ="E5E5FF"
textcolor[9] ="E2E2FF"
textcolor[10] ="DDDDFF"
function randommaker(range) {
return Math.floor(range*Math.random())
}
function initiate(){
if (document.all) {
for (i=0; i<=repeater;i++) {
obj[i]=eval("span"+i)
}
}
}
function showmessage(newmessage) {
message = newmessage
ismouseover=1
if (document.all) {
for (i=0; i<=repeater;i++) {
obj[i].innerHTML="<span id=’spn"+i+"’
style=’position:absolute;top:"+randommaker(250)+"px;left:"+randommaker(400)+"px;font-family:"+textfont[random
maker(4)]+";font-size:"+randommaker(40)+"pt;font-style:"+textstyle[randommaker(4)]+";color:"+textcolor[random
maker(9)]+"’>"+message+"</span>"
}
}
animatespans()
}
function hidemessage() {
if (document.all) {
for (i=0; i<=repeater;i++) {
ismouseover=0
obj[i].innerHTML=""
}
}
}
function animatespans() {
if (ismouseover==1) {
window.status=i_span
var objtomove = eval("document.all.spn"+i_span+".style")
objtomove.posLeft+=randommaker(2)-1
objtomove.posTop+=randommaker(2)-1
i_span++
if (i_span>=repeater-1) {i_span=0}
var timer = setTimeout("animatespans()",pause)
}
else {
clearTimeout(timer)
}
}
window.onload=initiate
// - End of JavaScript - -->
</script>
<style type="text/css">
A {
font-family:Verdana;
font-size:20px;
font-weight:bold;
color:444444;
text-decoration:none;
}
A:Visited {
color:444444;
}
A:Hover {
color:000000;
text-decoration:underline;
}
</STYLE>
2. <body>부분에 다음과 같은 소스를 넣습니다.
(요 부분에서 각자 홈페이지에 맞는 메뉴 이름을 적용하시면 됩니다.)
<script>
<!-- Beginning of JavaScript -
for (i=0; i<=repeater;i++) {
document.write("<span id=’span"+i+"’></span>")
}
document.close()
// - End of JavaScript - -->
</script>
<div style="position:absolute;top:20px;left:20px">
<a href="http://www.hihome.com" target="_blank" onMouseover="showmessage(’hihome’)" onMouseout="hidemessage()">hihome</A></div> <---------------------------자신이 원하는 메뉴명을 넣습니다
<div style="position:absolute;top:60px;left:20px">
<a href="http://www.hihome.com" target="_blank" onMouseover="showmessage(’Profile’)" onMouseout="hidemessage()">Profile</A></div> <---------------------------- 자신이 원하는 메뉴명을 넣습니다
<div style="position:absolute;top:100px;left:20px">
<a href="http://www.hihome.com" target="_blank" onMouseover="showmessage(’Cool Site’)" onMouseout="hidemessage()">Cool Site</A></div> <---------------------------- 자신이 원하는 메뉴명을 넣습니다
<div style="position:absolute;top:140px;left:20px">
<a href="http://www.hihome.com" target="_blank" onMouseover="showmessage(’Guest Book’)" onMouseout="hidemessage()">Guest Book</A></div> <---------------------------- 자신이 원하는 메뉴명을 넣습니다
