External JavaScript Sample

うちの超カスタム掲示板 (hidebbs) のJavaScript 外部ファイルの内容です。
hide bbs に使用している外部ファイル（JavaScript）の記述。　リンク部分の文字変更等＆リンク部分にカーソルが触れると虹色に変化させる JavaScript です。
タグの貼り付けが出来る、他の掲示板（魔法の i ーランドなど）にも使えますが、リンク箇所、スタイルシートのデザインを変更して下さい。
下記の記述をメモ帳／ Notepad にコピペして、好きなように改造して下さい。
4つの外部ファイル（スタイルシートと javascript ）の組み合わせで成り立っています。　どれかが欠けると機能しません。


//=============================================================================
//メインの外部ファイル、bagongbago.js の内容
//      使用場所        http://hidebbs.net/bbs/bago
//=============================================================================

//              Beginning of stylesheet
document.write('<link rel="stylesheet" href="http://external-file.com/ja/stylesheet/move.css" type="text/css">');
mac=(navigator.appVersion.indexOf("Mac",0) != -1)?true:false;
ie=(navigator.appName.charAt(0) == "M")?true:false;

document.write('<style type="text/css">');
if(mac){                //      For Macintosh IE NS
        document.write('body { background:#f5f5f5; font-size:10px; color:#777777; margin:8px 8px 8px 182px; border-color:#dddddd; border-width:20px; border-style:inset; padding:0px; scrollbar-face-color:#ebebeb; }');
        document.write('h1 { background:#7777ff; border-width:4px 3px 3px 3px; border-color:#f6ffff #990000 #555555 #eeeeee; border-style:double double solid double; color:#ffffff; font-size:19pt; padding:0.5em; }');
        document.write('table table { border-style:none; padding:0; text-align:left; width:100%; }');
        document.write('form table { border-style:none; font-family:Comic Sans MS; font-size:100%; margin:0; padding:0; text-align:left; width:90%; }');
        document.write('td { background:#ffddff; border-style:none; font-size:10px; color:#333333; padding:0.5em; }');
        document.write('input,select,textarea { background:#fffaf0; font-size:10px; }');
        document.write('hr { display:none; }');
        document.write('p.top { background:#f0f8ff; border-color:#987be2; border-style:solid; border-width:1px; text-align:center; font-size:20px; font-weight:bold; color:#333333; margin:0.5em; padding:0.5em; width:50%; }');
        document.write('img { border-style:none; }');
        document.write('blockquote { background:#f0f8ff; border-color:#987be2; border-style:dashed; border-width:1px; line-height:135%; margin:0.5em; padding:0.5em 1em; }');
        document.write('a:link { background:transparent; text-decoration:none; color:#0000ff; }');
        document.write('a:visited { background:transparent; text-decoration:none; color:#0000ff; }');
        document.write('a:active { background:transparent; text-decoration:none; color:#0000ff; }');
        document.write('a:hover { background:transparent; text-decoration:none; color:#ff0000; }');
}
else{
        if(ie){         //      For Windows IE
                document.write('body { background:#f6ffff; font-size:12px; line-height:125%; color:#777777; margin:8px 8px 8px 182px; border-color:#dddddd; border-width:20px; border-style:inset; padding:0px; scrollbar-face-color:#ebebeb; }');
                document.write('h1 { background:#7777ff; border-width:4px 3px 3px 3px; border-color:#f6ffff #990000 #555555 #eeeeee; border-style:double double solid double; color:#ffffff; font-size:19pt; padding:0.5em; }');
                document.write('table table { border-style:none; padding:0; text-align:left; width:100%; }');
                document.write('form table { border-style:none; font-family:Comic Sans MS; font-size:100%; margin:0; padding:0; text-align:left; width:90%; }');
                document.write('td { background:#eeeeee; border-style:none; font-size:13px; line-height:125%; color:#333333; padding:0.7em; }');
                document.write('input,select,textarea { background:#fffaf0; font-size:12px; }');
                document.write('hr { display:none; }');
                document.write('p.top { background:#f0f8ff; border-color:#987be2; border-style:solid; border-width:1px; text-align:center; font-size:22px; font-weight:bold; color:#333333; margin:0.5em 0.5em 0.5em 6em; padding:0.5em; width:50%; }');
                document.write('img { border-style:none; }');
                document.write('blockquote { background:#f0f8ff; border-color:#987be2; border-style:dashed; border-width:1px; line-height:135%; margin:0.5em; padding:0.5em 1em; width:90%; }');
                document.write('a:link { text-decoration:none; background:transparent; color:#4169e1; }');
                document.write('a:visited { text-decoration:none; background:transparent; color:#663333; }');
                document.write('a:active { text-decoration:none; background:transparent; color:#ff6eb5; }');
                document.write('a:hover { text-decoration:none; background:transparent; color:#00ffbb; }');
        }
        else{           //      For Windows NS
                document.write('body { background:#ffddff; font-size:14px; color:#777777; margin:8px 8px 8px 182px; border-color:#dddddd; border-width:20px; border-style:inset; padding:0px; scrollbar-face-color:#ebebeb; }');
                document.write('h1 { background:#7777ff; border-width:4px 3px 3px 3px; border-color:#f6ffff #990000 #555555 #eeeeee; border-style:double double solid double; color:#ffffff; font-size:19pt; padding:0.5em; }');
                document.write('table table { border-style:none; padding:0; text-align:left; width:100%; }');
                document.write('form table { border-style:none; font-family:Comic Sans MS; font-size:100%; margin:0; padding:0; text-align:left; width:90%; }');
                document.write('td { background:#ededed; border-style:none; font-size:14px; color:#333333; padding:1em; }');
                document.write('input,select,textarea { background:#fffaf0; font-size:14px; }');
                document.write('hr { display:none; }');
                document.write('p.top { background:#f0f8ff; border-color:#987be2; border-style:solid; border-width:1px; text-align:center; font-size:24px; font-weight:bold; color:#333333; margin:0.5em; padding:0.5em; width:50%; }');
                document.write('img { border-style:none; }');
                document.write('blockquote { background:#f0f8ff; border-color:#987be2; border-style:dashed; border-width:1px; line-height:135%; margin:0.5em; padding:0.5em 1em; }');
                document.write('a:link { text-decoration:none; background:transparent; color:#0000ff; }');
                document.write('a:visited { text-decoration:none; background:transparent; color:#0000ff; }');
                document.write('a:active { text-decoration:none; background:transparent; color:#0000ff; }');
                document.write('a:hover { text-decoration:none; background:transparent; color:#ff0000; }');
        }
}
document.write('<\/style>');
//              END of stylesheet

document.write('<scr'+'ipt src="http://external-file.com/ja/javascript/fixedlayer.js" type="text/javascript"><\/scr'+'ipt>');
document.write('<scr'+'ipt src="http://external-file.com/ja/javascript/biso_move.js" type="text/javascript"><\/scr'+'ipt>');

document.write('<div class="clsFloatMenu" id="idFixedMenu">');
document.write('<h2>MENU<\/h2>');
document.write('<ol class="clsFloatMenu">');
document.write('<li><a class="menu" title="ここのサイトのトップページ" href="http://external-file.com/">index<\/a><\/li>');
document.write('<li><a class="menu" title="HP改造前の基礎知識" href="http://external-file.com/ja/isa.html">HP改造前の基礎知識<\/a><\/li>');
document.write('<li><a class="menu" title="魔法の i -ランドの&#13HPを改造しよう" href="http://external-file.com/ja/dalawa.html">魔法の i -ランド改造<\/a><\/li>');
document.write('<li><a class="menu" title="外部ファイルの&#13別な使用方法＆テクニック" href="http://external-file.com/ja/tatlo.html">外部ファイルのテクニック<\/a><\/li>');
document.write('<li><a class="menu" title="外部ファイルの記述" href="http://external-file.com/ja/apat.html">外部ファイルの記述<\/a><\/li>');
document.write('<li><a class="menu" title="魔法の i -ランドの画像倉庫に&#13外部ファイルをアップする方法" href="http://external-file.com/ja/lima.html">外部ファイルのアップ方法<\/a><\/li>');
document.write('<\/ol>');
document.write('<h2>Contents<\/h2>');
document.write('<ol class="clsFloatMenu">');
document.write('<li><a class="menu" title="目次" href="http://external-file.com/ja/javascript_sample-0.html">list<\/a><\/li>');
document.write('<li><a class="menu" title="一番簡単な&#13ｂｂｓのサンプル" href="http://external-file.com/ja/kantan-sample.html">Sample 1<\/a><\/li>');
document.write('<li><a class="menu" title="hidebbs のサンプル" href="http://external-file.com/ja/javascript_sample.html">Sample 2<\/a><\/li>');
document.write('<li><a class="menu" title="うちの TOP のサンプル" href="http://external-file.com/ja/javascript_sample-3.html">Sample 3<\/a><\/li>');
document.write('<li><a class="menu" title="２ちゃんねる風&#13ｂｂｓのサンプル" href="http://external-file.com/ja/javascript_sample-4.html">Sample 4<\/a><\/li>');
document.write('<li><a class="menu" title="うちのプロフのサンプル" href="http://external-file.com/ja/javascript_sample-5.html">Sample 5<\/a><\/li>');
document.write('<li><a class="menu" title="Gusto mo bang Java Script" href="http://gusto.external-file.com/">Java Script<\/a><\/li>');
document.write('<li><a class="menu" title="サイト マップ" href="http://external-file.com/ja/site-map.html">Site map<\/a><\/li>');
document.write('<li><a class="menu" title="新着＆更新情報" href="http://external-file.com/ja/whatsnew.html">What\'s new<\/a><\/li>');
document.write('<li><a class="menu" title="サポート 掲示板" href="http://external-file.com/ja/question_notes.html">Support bbs<\/a><\/li>');
document.write('<\/ol>');
document.write('<\/div>');


//=============================================================================
//
//      ここより下の記述がリンク部分にカーソルが触れると虹色に変化させるJavaScriptです。
//
//      こちらからDL出来ます。
//      http://www.dynamicdrive.com/dynamicindex5/rainbow.htm
//
//=============================================================================


/***************************************************************************
 Rainbow Links Version 1.02a (2001.8.28)
 Custum by 空＝そら

 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
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
var IE = 0;
var Mozilla = 0;

// Browser check

var szUA = navigator.userAgent;
if (szUA.indexOf("MSIE 5.") >= 0) {
    IE = 5;
}
else if(szUA.indexOf("MSIE 6.") >= 0) {
    IE = 6;
} else if (szUA.indexOf("Mozilla/5.") >= 0) {
    Mozilla = 6;
}
else if(szUA.indexOf("MSIE 4.") >= 0) {
    IE = 4;
}
else if(szUA.indexOf("Mozilla/4.") >= 0) {
    Mozilla = 4;
}


if (IE >= 4) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (Mozilla >= 6) {
    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;
}

// END
External JavaScript Sample - document.write
