< HOME / 掲示板 / 総合質問板 / 過去ログ / 一覧 / 文字色で…

---

0   名前： 霜月檜芽 ： 2007/02/18（日） 18:49  ID:gJgKieVQ sub-FE

はじめまして、霜月檜芽と申します。
文字色のことで質問させていただきます。

文字に触れたときに(色がたとえば)『緑・赤・ピンク・青』というふうに
ゆっくりとグラデーションのように変わっていく感じにしたくて、
タグがあるのならばそのタグが知りたいなと思い、新規スレッドを作成させていただきました。

【現在の状況】
上に記したとおり、タグからわからない状況です。
【何をしてみたのか】
とりあえずいろいろなタグサイトを回りましたが、そのようなタグを載せている所はありませんでした。

ものすごく少ない情報ですが、そのタグを知っている方、回答よろしくお願いします。

---

1   名前： あや ： 2007/02/18（日） 18:49  ID:TRVH9wjM sub-ND

http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=976
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=977
この二つのスレのように「ゆっくりぴろーん」とか「マウスを乗せた時に何かを変化をさせる」という動的な表現はJAVA-scriptを使わないとだめだと思うので、そちらで質問し直してみるといいのでは…と思います。

---

2   名前： 霜月檜芽 ： 2007/02/18（日） 18:49  ID:gJgKieVQ sub-FE

回答ありがとうございます。
JAVA-scriptでやるんですか、それではもう一度、そのような表現で検索してみようと思います。
わかりやすいアドバイスありがとうございます。

---

3   名前： 匿名 ： 2007/02/18（日） 18:49  ID:rEkc4Z1y sub-kJ

「JAVA-script」じゃなく「JavaScript」。LiveScript として始まり、ECMASCript として標準化された、Java とは言語的に無関係なスクリプト言語。

それから、タグというのは < から始まって > で終わる標識。<title> を title 要素の開始タグ、</title> を title 要素の終了タグと呼ぶ。それ以外をタグとは呼ばない。


さて、文字色を変えるには何をする？そう、CSS の color だね（ここで <font/> と叫んでしまったら、HTML と CSS のお勉強を一からやり直そう）。だから、JavaScript で color を変えてやれば良いわけだ。

で、「文字に触れたときに」はどうすれば良い？ CSS の :hover？ 良い答えだ。:hover でグラデーションアニメ GIF 背景に入れ替えれば、簡単。


もしアニメ GIF を作るのが面倒で、もっと面倒な JavaScript を使うなら、CSS の :hover ではなく mouseover というイベントを使用することになる。

/* em 要素に触れると色変え */
<p>さて<em>頑張ろう</em>。もう<em>一息</em>だ。</p>

<script type="text/javascript">
(function () {
    function addEventLi$tener (type, listener, useCapture) {
        this./*@cc_on @if (@_jscript) attachEvent ('on' + @else@*/
             addEventListener (/*@end@*/ type, listener, useCapture);
    }
    
    function removeEventLi$tener (type, listener, useCapture) {
        this./*@cc_on @if (@_jscript) detachEvent ('on' + @else@*/
             removeEventListener (/*@end@*/ type, listener, useCapture);
    }
    
    var TOListener = function () {
        var l = arguments.callee;
        l.element.style.color = l.colors[ l.index++ % l.colors.length ];
        l.timerId = setTimeout (l, l.timeout);
    };
    TOListener.colors  = [ 'green', 'red', 'pink', 'blue' ];
    TOListener.timeout = 200;
    TOListener.timerId = null;
    TOListener.index   = 0;
    TOListener.element = null;
    
    var MOListener = function (event) {
        var moL = arguments.callee;
        var toL = moL.TOListener;
        var target = event.target || window.event.srcElement;
        
        if (target.nodeName == 'EM') {
            if (! toL.timerId) {
                toL.element = target;
                toL.timerId = setTimeout (moL.TOListener, toL.timeout);
            }
        } else {
            clearTimeout (toL.timerId);
            toL.timerId = null;
        }
    }
    MOListener.TOListener = TOListener;
    
    var ULListener = function () {
        removeEventLi$tener.call (document, MOListener, false);
        removeEventLi$tener.call (window, ULListener, false);
    };
    
    addEventLi$tener.call (document, 'mouseover', MOListener, false);
    addEventLi$tener.call (window, 'unload', ULListener, false);
} )();
</script>

---

4   名前： 匿名 ： 2007/02/18（日） 18:49  ID:rEkc4Z1y sub-kJ

訂正。

var ULListener = function () {
    removeEventLi$tener.call (document, MOListener, false);
    removeEventLi$tener.call (window, ULListener, false);
};

↓

var ULListener = function () {
    removeEventLi$tener.call (document, 'mouseover', MOListener, false);
    removeEventLi$tener.call (window, 'unload', ULListener, false);
};

---

5   名前： 匿名 ： 2007/02/18（日） 18:49  ID:rEkc4Z1y sub-kJ

連投ごめん。全体的に修正。

if (document.implementation &&
    document.implementation.hasFeature ('HTML', '1.0') &&
//  document.implementation.hasFeature ('CSS2', '2.0') &&
// (document.implementation.hasFeature ('MouseEvents', '2.0') || typeof attachEvent != 'undefined') &&
    typeof Function.prototype.call != 'undefined')

(function () {
    function addEventLi$tener (type, listener, useCapture) {
        this./*@cc_on @if (@_jscript) attachEvent ('on' + @else@*/
             addEventListener (/*@end@*/ type, listener, useCapture);
    }
    
    function removeEventLi$tener (type, listener, useCapture) {
        this./*@cc_on @if (@_jscript) detachEvent ('on' + @else@*/
             removeEventListener (/*@end@*/ type, listener, useCapture);
    }
    
//______________________________________________________________________
    
    var TOListener = function () {
        var l = arguments.callee;
        l.element.style.color = l.colors[ l.index++ % l.colors.length ];
        l.timerId = setTimeout (l, l.timeout);
    };
    
    TOListener.colors  = [ 'green', 'red', 'pink', 'blue' ];  // 色リスト
    TOListener.timeout = 200;  // 変化する間隔（ミリ秒）
    TOListener.timerId = null;
    TOListener.index   = 0;
    TOListener.element = null;
    
//______________________________________________________________________
    
    var MOListener = function (event) {
        var moL = arguments.callee;
        var toL = moL.TOListener;
        var target = event.target || window.event.srcElement;
        
        if (target.nodeName == moL.targetName) {
            if (! toL.timerId) {
                toL.element = target;
                toL.timerId = setTimeout (moL.TOListener, toL.timeout);
            }
        } else {
            clearTimeout (toL.timerId);
            toL.timerId = null;
            toL.element = null;
        }
    };
    
    MOListener.targetName = 'EM';  // 対象にする要素名（大文字）
    MOListener.TOListener = TOListener;
    
//______________________________________________________________________
    
    var ULListener = function () {
        var l = arguments.callee;
        removeEventLi$tener.call (document, 'mouseover', l.MOListener, false);
        removeEventLi$tener.call (window, 'unload', l, false);
    };
    
    ULListener.MOListener = MOListener;
    
//______________________________________________________________________
    
    addEventLi$tener.call (document, 'mouseover', MOListener, false);
    addEventLi$tener.call (window, 'unload', ULListener, false);
    
    delete MOListener, TOListener, ULListener;
} )();

---

6   名前： 匿名 ： 2007/02/18（日） 18:49  ID:rEkc4Z1y sub-kJ

スレハイジャックのようで本当に申し訳ないが、私自身が delete の使い方を間違っていたのに今気付いた。>>5 のわざわざ強調した部分は、まるで無意味。うわー恥ずかしい。

/*@cc_on@*/
if (document.implementation &&
    document.implementation.hasFeature ('HTML', '1.0') &&
/*@if (@_jscript)
    @_jscript_version > 5 &&
    typeof attachEvent != 'undefined' &&
  @end@*/
    document.implementation.hasFeature ('CSS2', '2.0') &&
    document.implementation.hasFeature ('HTMLEvents' , '2.0') &&
    document.implementation.hasFeature ('MouseEvents', '2.0') &&
/*@end@*/
    typeof Function.prototype.call != 'undefined' &&
    typeof setTimeout != 'undefined')

(function () {
    
    function addEventLi$tener (type, listener, useCapture) {
        this./*@if (@_jscript) attachEvent ('on' + @else@*/
             addEventListener (/*@end@*/ type, listener, useCapture);
    }
    
    function removeEventLi$tener (type, listener, useCapture) {
        this./*@if (@_jscript) detachEvent ('on' + @else@*/
             removeEventListener (/*@end@*/ type, listener, useCapture);
    }
    
//______________________________________________________________________
    
    var TOListener = function () {
        var l = arguments.callee;
        l.element.style.color = l.colors[ l.index = (l.index + 1) % l.colors.length ];
        l.timerId = setTimeout (l, l.timeout);
    };
    
    TOListener.colors  = [ 'green', 'red', 'pink', 'blue' ];
    TOListener.timeout = 200;
    TOListener.timerId = null;
    TOListener.index   = 0;
    TOListener.element = null;
    
//______________________________________________________________________
    
    var MOListener = function (event) {
        var moL = arguments.callee;
        var toL = moL.TOListener;
        var target = event.target || window.event.srcElement;
        
        if (target.nodeName == moL.targetName) {
            if (! toL.timerId) {
                toL.element = target;
                toL.timerId = setTimeout (moL.TOListener, toL.timeout);
            }
        } else {
            clearTimeout (toL.timerId);
            toL.timerId = null;
            toL.element = null;
        }
    };
    
    MOListener.targetName = 'EM';
    MOListener.TOListener = TOListener;
    
//______________________________________________________________________
    
    var ULListener = function () {
        var l = arguments.callee;
        removeEventLi$tener.call (document, 'mouseover', l.MOListener, false);
        removeEventLi$tener.call (window  , 'unload'   , l           , false);
    };
    
    ULListener.MOListener = MOListener;
    
//______________________________________________________________________
    
    addEventLi$tener.call (document, 'mouseover', MOListener, false);
    addEventLi$tener.call (window  , 'unload'   , ULListener, false);
    
    MOListener = TOListener = ULListener = null;
    
} )();

---

---

TAG indexについて - ご利用について - プライバシーポリシー - 連絡フォーム - 広告掲載のご案内 - お問い合わせ

［ホスティング by XREAサーバー］

Copyright (C) 1997-2008 TAG index. All Rights Reserved.