자바스크립트와 스타일시트로 멋진 텍스트 메뉴를

2008. 12. 18. 14:51 from javascript

<HTML>
<HEAD>

<BODY>

<!-- 1. 아래 스크립트를 BODY 부분에 복사 해 넣으세요 ----------->

<script language="JavaScript">
<!--

    {
    document.body.onmouseover=makeCool;
    document.body.onmouseout=makeNormal;
    }

    function makeCool() {
        src = event.toElement;
        if (src.tagName == "A") {
            src.oldcol = src.style.color;
            if (src.oldcol == "rgb(0,0,0)") {
                        src.style.color = "#0000FF";
                }
            else {                
                    if (src.oldcol == "rgb(255,255,0)") {
                            src.style.color = "#FF0000";
                    }
                    if (src.oldcol == "rgb(0,0,255)") {
                            src.style.color = "#000000";
                    }
                    if (src.oldcol == "rgb(255,0,0)") {
                            src.style.color = "#FFF000";
                    }
            }
        }
    }
    function makeNormal() {
        src=event.fromElement;
        if (src.tagName == "A") {
            src.style.color = src.oldcol;
        }
    }
// -->
</script>


<!------------- 메뉴 레이어 입니다 -------------->

<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="44">
  <tr>
    <td bgcolor="#FF0000" align="center" width="25%" height="44"><b><a
    href="a.htm" target="_blank" style="color: rgb(0,0,0)">Linkcolor 1</a></b></td>
    <td bgcolor="#000000" align="center" width="25%" height="44"><b><a
    href="b.htm" target="_blank" style="color: rgb(255,255,0)">Linkcolor 2</a></b></td>
    <td bgcolor="#FFFF00" align="center" width="25%" height="44"><b><a
    href="c.htm" target="_blank" style="color: rgb(0,0,255)">Linkcolor 1</a></b></td>
    <td bgcolor="#0000FF" align="center" width="25%" height="44"><b><a
    href="d.htm" target="_blank" style="color: rgb(255,0,0)">Linkcolor 2</a></b></td>
  </tr>
</table>
</div>

<!------------- 메뉴 레이어 입니다 -------------->

</body>
</html>

Posted by 바이민 :

스타일쉬트를 이용한 메뉴 설명 스크립트

2008. 12. 18. 14:50 from javascript

[스크립트]

<STYLE>
.desc {
text-align:     center;
font-family:    times;
font-size:      20px;
color:          red;
position:       absolute;
top:            250px;
left:           20px;
width:          1000px;
visibility:     hidden;
z-index:        0;
}

BODY {
background:     #000000;
}
A {
text:           bold;
text-decoration:none;
color:          lime;
}

A:HOVER {        color : yellow;        

}
</STYLE>
<SCRIPT LANGUAGE = "JavaScript">
    /* Show an object */
    function showObject(object) {
        object.visibility = VISIBLE;
    }
    /* Hide an object */
    function hideObject(object) {
        object.visibility = HIDDEN;
    }
</SCRIPT>
<BODY BGCOLOR="#ffffff" link="green" TEXT="lime">
<p> </p>
<p> </p>
<H2 ALIGN=CENTER>
<A HREF = "#" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)">Main Page</A><BR>

<A HREF = "#" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)">Gallery</A><BR>

<A HREF = "#" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)">Interesting Facts</A><BR>

<A HREF = "#" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)">Info</A><BR>
</H2>

<DIV ID = "desc1" CLASS = "desc">
Back to the Main Page
</DIV>

<DIV ID = "desc2" CLASS = "desc">
Visit a Gallery of Madbull's maniac
</DIV>

<DIV ID = "desc3" CLASS = "desc">
Find out facts you never knew before
</DIV>

<DIV ID = "desc4" CLASS = "desc">
Visit my Home Page for fun and share<br>
my cool life
</DIV>
<SCRIPT LANGUAGE = "JavaScript">

    /* Simple version detection */
    var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

/* They can be used in place
       of hidden and visible because on occasion Navigator has problems with the two */
    var HIDDEN = (isNS) ? 'hide' : 'hidden';
    var VISIBLE = (isNS) ? 'show' : 'visible';

    /* Create shortcut variables for different absolutely positioned elements */
    var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;
    var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;
    var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;
    var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;
    
</SCRIPT>

Posted by 바이민 :

스타일 시트를 이용한 롤오버 자바 버튼 스크립트

2008. 12. 18. 14:49 from javascript

<HTML>
<HEAD>
<TITLE> JASKO 샘플 페이지 </TITLE>

<!-- 1. 메모장 등으로 아래의 내용을 HTML 문서의 HEAD 부분에 붙여 넣으세요 -->

<style>

/******** 마우스를 대었을때 버튼의 모양을 설정 합니다 *********/

  .start {color:white; background:orange}

</style>

<script LANGUAGE="JAVASCRIPT">
  function highlightButton(s) {
    if ("INPUT"==event.srcElement.tagName)
      event.srcElement.className=s
  }
</script>

</head>

<body>

<center>

<!--------- 아래의 방법으로 버튼을 만듭니다 ---------------------->

<form NAME="highlight" onmouseover="highlightButton('start')"
onmouseout="highlightButton('')">
  <p>
  <input type="button" value=" 마우스를 대어 보세요 ">
  <input type="button"  onmousedown="this.style.fontStyle='italic'" onmouseup="this.style.fontStyle=''"
  value=" 이곳을 클릭 해 보세요 " onclick="this.value=' 누르랜다고 누르셨네요. 하하하~! '">
  <input type="button" value=" 마우스를 대어 보세요 ">
  </p>
</form>
</font>

</body>
</html>
 

Posted by 바이민 :

롤오버 텍스트 버튼 스크립트

2008. 12. 18. 14:49 from javascript

<HTML>
<HEAD>
<TITLE> JASKO 샘플 페이지 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="JASKO">
<META NAME="Keywords" CONTENT="JavaScript, 자바스크립트">

<!-- 1. 메모장 등으로 아래의 내용을 HTML 문서의 HEAD 부분에 붙여 넣으세요 -->

<STYLE>

/* 기본 스타일 */

.Item {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: normal;
background-color: white;
color: black }

/* 마우스를 대었을때 */

.Highlight {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: italic;
background-color: orange;
color: white }
</STYLE>

</HEAD>


<BODY>

<!------ 아래의 방법으로 메뉴를 작성 합니다 ------------>

<div id=Rollover>
<TABLE border="0">
<TR>
<TD width="490">

<SCRIPT language="JavaScript">
function rollon() {
         if (window.event.srcElement.className == "Item") {
            window.event.srcElement.className = "Highlight";
         }
      }

      Rollover.onmouseover = rollon;

      function rolloff() {
         if (window.event.srcElement.className == "Highlight") {
            window.event.srcElement.className = "Item";
         }
      }

      Rollover.onmouseout = rolloff;
   </SCRIPT>

<P align="center"><span class="Item">우유</span> <span class="Item">까까</span> <span class="Item">달걀</span> <span class="Item">햄버그</span> <span class="Item">치즈</span> <span class="Item">파스타</span> <span class="Item">통닭</span> </P>
<P align="center">

</TD>
</TR></TABLE></DIV>

</body>
</HTML>

Posted by 바이민 :

링크 텍스트 색상이 제멋대로 번쩍번쩍 하는 효과 주기

2008. 12. 18. 14:49 from javascript

[스크립트]

<SCRIPT LANGUAGE="JavaScript">

<!--
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"blue",
"green",
"purple",
"black",
"tan",
"red");
delay = .5; // seconds
link = 0;
vlink = 2;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay*1000);
}
linkDance();
// -->
</SCRIPT>


Posted by 바이민 :

NC 전용 마우스로 이미지,텍스트 끌기

2008. 12. 18. 14:48 from javascript

[스크립트]

<STYLE>

        A {text-decoration: none; color: firebrick}
</STYLE>
<SCRIPT language="javascript1.2">

  

current_object = null;
last_object = null;
objectX = 0;
objectY = 0;

function key_press(e) {
        last_object.zIndex=5;  
}

function begin_event(object,e) {
                current_object = object;
                objectX = e.pageX;
                objectY = e.pageY;
                window.captureEvents(Event.MOUSEMOVE);

}
function drag_event(e) {
        if (current_object != null) {
                current_object.left = current_object.left + (e.pageX - objectX);
                current_object.top = current_object.top + (e.pageY - objectY);
                objectX = e.pageX;
                objectY = e.pageY;
        }
        return false;
}

function end_event() {
        window.releaseEvents(Event.MOUSEMOVE);
        last_object = current_object;
        current_object = null;
}

window.onmousemove=drag_event;
document.captureEvents(Event.DBLCLICK);
document.ondblclick = key_press;

</SCRIPT>
</HEAD>
<BODY BGCOLOR=White>

        <DIV id="theblock" style="position: absolute;top: 50px; left: 20px; width:300px ">
        <a href="" onmousedown="begin_event(theblock,event);return false"onmouseup="end_event();return false">
        여기도 끌어 보세요..</DIV>


         <DIV id="kiss1" style="position: absolute;top:100px; left: 100px;">
        <a href="" onmousedown="begin_event(kiss1, event);return false"
        onmouseup="end_event();return false">
        <img src="http://bora.dacom.co.kr/~adamite/CLIPARTS/clipart/!kiss_1.gif" border=0></a></DIV>

        <DIV id="kiss2" style="position: absolute;top:200px; left: 100px;">
        <a href="" onmousedown="begin_event(kiss2, event);return false"
        onmouseup="end_event();return false">
        <img src="http://bora.dacom.co.kr/~adamite/CLIPARTS/clipart/!nokis_s.gif" border=0></a></DIV>
        
        <DIV id="kiss3" style="position: absolute;top:100px; left: 350px;">
        <a href="" onmousedown="begin_event(kiss3, event);return false"
        onmouseup="end_event();return false">
        <img src="http://bora.dacom.co.kr/~adamite/CLIPARTS/clipart/!nokis_t.gif" border=0></a></DIV> 
 

Posted by 바이민 :

NC 전용 마우스를 따라다니는 이미지

2008. 12. 18. 14:48 from javascript

[스크립트]

<SCRIPT language='JavaScript'>


var icon_btn = null

window.captureEvents(Event.MOUSEMOVE);

window.onmousemove= move

function move(e) {

icon_btn = document.layers['I_BTN']

        if (icon_btn != null) {

                icon_btn.left= e.pageX + 5;

                icon_btn.top= e.pageY + 5;

        }

}


</SCRIPT>

<LAYER name='I_BTN' left=0 top=0>
<IMG SRC='http://bora.dacom.co.kr/~adamite/CLIPARTS/rose/pastel1.gif' BORDER=0>
</LAYER>
 

Posted by 바이민 :

NC 전용 UL/OL Syntex

2008. 12. 18. 14:48 from javascript

[스크립트]

<STYLE TYPE="text/css">

   UL.BLUELIST {color:blue;}

   UL.BLUELIST LI {color:aqua;list-style-type:square;}

   OL.REDLIST {color:red;}

   OL.REDLIST LI {color:magenta; list-style-type:upper-roman;}

   </STYLE>
</head>
<body>

<h1><p>UL/OL Syntex</p></h1>
<hr>

<center><table><tr><td bgcolor='yellow'>

<h3>


<br><br>

<UL CLASS=BLUELIST> <!-- LI elements inherit from UL -->

   <LI>컨설팅

   <LI>부동산 개발

   <LI>재밋는 께임

   </UL>

   <OL CLASS=REDLIST> <!-- LI elements inherit from OL -->

   <LI>함 해볼까?

   <LI>너 이름 쓸줄 아러?

   <LI>그럼, 함 써봐.. ..아랍어로..

   </OL>
</h3>
<br><br>
</td><tr></table>
 

Posted by 바이민 :

NC 전용 헤엄치는 물고기

2008. 12. 18. 14:47 from javascript

[스크립트]

        <SCRIPT>

        function showForm() {
            document.waiting.visibility="hide";
            document.formlayer.visibility="show";
            return false;
        }
        <!-- Simple move function -->
        function movefish() {

                var fish = document.fish;
                if (fish.left < 400) {
                        fish.offset(5, 0);}
                else {fish.left = 10;}

                setTimeout("movefish()", 10);
                return;
        }


</SCRIPT>

        <BODY BGCOLOR="#FFFFFF" ONLOAD="showForm();">

        <LAYER NAME="bluepole" LEFT=160 TOP=150>
        <IMG SRC=http://developer.netscape.com/library/documentation/communicator/dynhtml/images/bluepole.gif>
        </LAYER>

        <LAYER NAME="greenpole" LEFT=360 TOP=150>
        <IMG SRC=http://developer.netscape.com/library/documentation/communicator/dynhtml/images/greenpol.gif>
        </LAYER>

        <LAYER NAME="redpole" LEFT=260 TOP=150>
        <IMG SRC=http://developer.netscape.com/library/documentation/communicator/dynhtml/images/redpole.gif>
        </LAYER>

        <LAYER NAME="fish" LEFT=40 TOP=170  ABOVE="redpole">
        <IMG SRC=http://developer.netscape.com/library/documentation/communicator/dynhtml/images/fish1.gif >
        </LAYER>

    <H1>헤엄치는 물고기</H1>
<hr>
    <ILAYER ID=formlayer VISIBILITY=HIDE>
        <FORM>
        <INPUT type=button value="고기야 한번 놀아볼래 ?"
        OnClick="movefish(); return false;">
        </FORM>
        </LAYER>

        <LAYER ID=waiting TOP=100 LEFT=50>
        <H3>물고기 나올때 까지 잠시만 기다려주세요</H3>
        </LAYER>
<hr>

Posted by 바이민 :

Underlined Heading

2008. 12. 18. 14:47 from javascript

[소스 보기]

<STYLE TYPE="text/css">

    P {

        textAlign:center; margin-left:20%; margin-right:20%;}    

    H4 {

        text-decoration:underline; color: green;}

    H5 {

        text-transform:uppercase; color: red;

        border-width:4pt; border-style:outset;

        background-color:yellow; padding: 4pt;

        border-color:red;}

    BLOCKQUOTE {

        color:blue; font-style:italic;

        line-height:1.5; text-indent:10%;}

    </STYLE>
</HEAD>
<BODY>
<H4>Underlined Heading 4</H4>

    <BLOCKQUOTE>

    This is a blockquote. It is usual for blockquotes to be indented, but
    the first line of this blockquote has an extra indent. Also the line
    height in this blockquote is bigger than you usually see in blockquotes.

    <h5>uppercase heading 5 with a border</H5>

    </BLOCKQUOTE>

    <P>This paragraph has a text alignment value of center. It also has
    large margins, so each line is not only centered but is also inset on
    both sides from the element that contains it, which in this case is the
    document.</P>
 

Posted by 바이민 :

티스토리툴바