Javascript Patchworker - リンク色を徐々に変化（設置簡易版）

このスクリプトについて
　文字色を徐々に変化ではマウスオーバーでのグラデーションを見せましたが、これを実際に設置、特にページ内の全てのリンクにこれを設置しようと思うとなかなか大変な作業です。一つ一つの<a>タグにonMouseOver, onMouseOutなどと長ったらしいハンドラを記述するのは誰だって避けたいと思いますよね。そこで、設置の対象<a>タグに特化し、スマートな設置が出来るようにと、このスクリプトを開発しました。多少のタイムラグから来る不具合があり、IEでしか実現できないという欠点があるものの、設置はずっと簡単でなおかつ柔軟性があります。

実行例

こちらをご覧ください

関連

対応ブラウザ
WIN IE 4.0～ NN -～　MAC IE 4.0～ NN -～

サンプルソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  var limit = 12; //色変化の上限
  var n = "c"; //色変化の際の定数値
//------------------------------------------------------

var id; var waiting; var cnt = 0; var getObj; var setObj;
var proMode; var proFlag = false;
var pointX; var pointY;

function gradationA(){
  //色の上限になったら変化をストップ
  if (cnt == limit) {
    clearInterval (id);
    return true;
  }
  //cntを16進数に変換
  x = cnt.toString(16);
  x = x.toString();
  setObj.style.color = "#" + x+n+x+x+n+x; //(X)
  cnt ++;
}
window.document.onmousemove = colorChange;
//-->
</script>
</head>
<body>
<p><strong><a href="index.html">ラーメン</a></strong></p>
<p><strong><a href="indexs.html">スパゲティ</a></strong></p>

</body>
</html>

ユーザ設定
　ユーザが設定する変数はlimitとnです。
limitには変化にかかる時間を設定します。0～15までの整数で指定してください。
nには変化のときに要となる色の強さを16進数で設定します。数字を大きめにすると、グラデーションのような効果がつけられます。
また(X)の組み合わせを操作することで、他の色で様々な変化を楽しむことが出来ます。いろいろ試してみてください。

　設置上の注意としては、リンク同士をあまり接近した場所に置かないということです。同じ行にリンクをおく場合には全角１文字以上、同じ列におく場合にはサンプルの間隔程度をあけることを推奨します。それ以外の条件の場合は先に述べた動作の不具合はほとんど起こりません。
また、<a>タグを一番内側に記述してください。（サンプル参照）

JavaScriptのTOPに戻る　　

TOPに戻る