웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마우스 올리면 링크 텍스트를 무지개빛으로_12시20분 수정.;;
2004.01.06 11:47
출처 http://www.dynamicdrive.com/dynamicindex5/rainbow.htm
기존의 링크의 점선테두리 없애는 방법과 중복으로 써도 되는군요.;;
처음에 적용했을땐 뭔가 안되더니 푸터파일에 둘다 써서 적용하니 이상없네요
제가 사용하는 점선테두리 없애는 건 아래의 링크의 방법입니다.
http://www.nzeo.com/bbs/zboard.php?id=p_javascript&no=198
-수정끝-
링크텍스트뿐만 아니라 그냥 텍스트에도 적용할수있는 방법도 뽑아왔습니다.
Note: You can explicitly add the rainbow effect to other text (not link text), by inserting the code onmouseover="doRainbow(this);" and onmouseout="stopRainbow();" inside the tag in question.
이아래의 소스를 몽땅 복사해다 붙여서 사용하면 되는데 js파일로 따로 만들어서 사용하실분이라면 위의 출처에 만들어진게 있습니다.
그걸 받아다가 사용하셔도 됩니다.
그리고 IE 6.0이상에서만 가능한건지도 모르겠습니다.;;;;
<SCRIPT LANGUAGE="JavaScript">
<!--
/************************************************************************/
/* Rainbow Links Version 1.03 (2003.9.20) */
/* Script updated by Dynamicdrive.com for IE6 */
/* Copyright (C) 1999-2001 TAKANASHI Mizuki */
/* takanasi@hamal.freemail.ne.jp */
/*----------------------------------------------------------------------*/
/* Read it somehow even if my English text is a little wrong! ;-) */
/* */
/* Usage: */
/* Insert '<script src="rainbow.js"></script>' into the BODY section, */
/* right after the BODY tag itself, before anything else. */
/* You don't need to add "onMouseover" and "onMouseout" attributes!! */
/* */
/* If you'd like to add effect to other texts(not link texts), then */
/* add 'onmouseover="doRainbow(this);"' and */
/* 'onmouseout="stopRainbow();"' to the target tags. */
/* */
/* This Script works with IE4,Netscape6,Mozilla browser and above only, */
/* but no error occurs on other browsers. */
/************************************************************************/
////////////////////////////////////////////////////////////////////
// Setting
var rate = 20; // Increase amount(The degree of the transmutation)
////////////////////////////////////////////////////////////////////
// Main routine
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
//=============================================================================
// doRainbow
// This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
//=============================================================================
// stopRainbow
// This function stops to change a color.
//=============================================================================
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
//=============================================================================
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
//=============================================================================
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
//=============================================================================
// Change Color
// This function changes a color actually.
//=============================================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}
//=============================================================================
// makeColor
// This function makes rainbow colors.
//=============================================================================
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//-->
</SCRIPT>
기존의 링크의 점선테두리 없애는 방법과 중복으로 써도 되는군요.;;
처음에 적용했을땐 뭔가 안되더니 푸터파일에 둘다 써서 적용하니 이상없네요
제가 사용하는 점선테두리 없애는 건 아래의 링크의 방법입니다.
http://www.nzeo.com/bbs/zboard.php?id=p_javascript&no=198
-수정끝-
링크텍스트뿐만 아니라 그냥 텍스트에도 적용할수있는 방법도 뽑아왔습니다.
Note: You can explicitly add the rainbow effect to other text (not link text), by inserting the code onmouseover="doRainbow(this);" and onmouseout="stopRainbow();" inside the tag in question.
이아래의 소스를 몽땅 복사해다 붙여서 사용하면 되는데 js파일로 따로 만들어서 사용하실분이라면 위의 출처에 만들어진게 있습니다.
그걸 받아다가 사용하셔도 됩니다.
그리고 IE 6.0이상에서만 가능한건지도 모르겠습니다.;;;;
<SCRIPT LANGUAGE="JavaScript">
<!--
/************************************************************************/
/* Rainbow Links Version 1.03 (2003.9.20) */
/* Script updated by Dynamicdrive.com for IE6 */
/* Copyright (C) 1999-2001 TAKANASHI Mizuki */
/* takanasi@hamal.freemail.ne.jp */
/*----------------------------------------------------------------------*/
/* Read it somehow even if my English text is a little wrong! ;-) */
/* */
/* Usage: */
/* Insert '<script src="rainbow.js"></script>' into the BODY section, */
/* right after the BODY tag itself, before anything else. */
/* You don't need to add "onMouseover" and "onMouseout" attributes!! */
/* */
/* If you'd like to add effect to other texts(not link texts), then */
/* add 'onmouseover="doRainbow(this);"' and */
/* 'onmouseout="stopRainbow();"' to the target tags. */
/* */
/* This Script works with IE4,Netscape6,Mozilla browser and above only, */
/* but no error occurs on other browsers. */
/************************************************************************/
////////////////////////////////////////////////////////////////////
// Setting
var rate = 20; // Increase amount(The degree of the transmutation)
////////////////////////////////////////////////////////////////////
// Main routine
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
//=============================================================================
// doRainbow
// This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
//=============================================================================
// stopRainbow
// This function stops to change a color.
//=============================================================================
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
//=============================================================================
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
//=============================================================================
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
//=============================================================================
// Change Color
// This function changes a color actually.
//=============================================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}
//=============================================================================
// makeColor
// This function makes rainbow colors.
//=============================================================================
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//-->
</SCRIPT>
제목 | 글쓴이 | 날짜 |
---|---|---|
트랙백 구현하기 - 2. 트랙백의 형식 | TheMics | 2004.04.22 |
트랙백 구현하기 - 2. 트랙백의 형식 | TheMics | 2004.04.22 |
PHP5 RC2 Released. [4] | 써니루루☆ | 2004.04.27 |
PHP 4에서 PHP 5로 이행 [5] | 이종현 | 2004.04.30 |
포털사이트 처럼 시스템 점검중 만들기 [3] | http://zentoo.com | 2004.05.14 |
팁 아닌 팁 한달전... | http://zentoo.com | 2004.05.15 |
[국밥PHP] 1-1(1). 개념정리 Break Time (Build 1) [7] | 9000㎒ | 2004.05.18 |
PHP로 구현하는 음악 감상실 [9] | 컴도미 | 2004.05.21 |
초간단 설문조사 소스 [3] | 이혁 | 2004.05.27 |
해당 ftp 파일 서버에서 다른곳의 ftp 파일 서버로 백업용도 및 전송하기.. [9] | 김동욱 | 2004.05.30 |
초간단 스팸방지 하면서 곧바로 메일 보내기 [3] | U2em | 2004.05.31 |
윈도우계정에서 현재 남은 용량과 DB 용량 알기 [6] | 지으니 | 2004.05.31 |
주식정보출력코드 [2] | 김재경 | 2004.06.01 |
1. 연산자 [2] | 티다 | 2004.06.02 |
2. array [5] | 티다 | 2004.06.02 |
게시판내용에 코멘트를 달자!! [3] | 헉스 | 2004.06.02 |
게시판내용에 코멘트를 달자!! -2- [1] | 헉스 | 2004.06.02 |
게시판내용에 코멘트를 달자!! -마지막- [2] | 이혁 | 2004.06.03 |
응용편 - BMI 측정 테스트 소스를 만들어보자 [5] | 티다 | 2004.06.04 |
3. if문 [13] | 티다 | 2004.06.05 |