文字色の自動変化について



0   名前: Daipa : 2006/06/30(金) 21:05  ID:7bA9Rzbr
こんばんは、Daipaと申します。

文字の色が自動で変化するスプリクトを見つけて来て使って見たのですが、
idで指定しているので、ページ内で1度づつしか使えません。
沢山使いたい場合は、同じ作業でもidを増やして行くしかないのでしょうか。
改善策や別な方法などがあったら教えて下さい。お願いします。
ただ、Java Scriptは全くの初心者なので、分かりやすく教えて頂ければ有難いです。

<HTML>
<HEAD>
<script type="text/javascript">
<!--
var henkaA = 0;
var henkaB = 0;
dcA = new Array("#000000","#15eaea");
dcB = new Array("#000000","#ff0000");
function hyooji(){
if (henkaA >= 1) henkaA = 0;else henkaA++;
if (henkaB >= 1) henkaB = 0;else henkaB++;
document.getElementById("dmA").style.color = dcA[henkaA];
document.getElementById("dmB").style.color = dcB[henkaB];
setTimeout("hyooji()",500);
}
window.onload = hyooji;
//-->
</script>
</HEAD>
<BODY>
<DIV id="dmA"><font face=HARDEHEADED>aaa</font></DIV>
<DIV id="dmB"><font face=HARDEHEADED>bbb</font></DIV>
<DIV id="dmA"><font face=HARDEHEADED>沢山使いたいのですが</font></DIV>
</BODY>
</HTML>

1   名前: m035 ◆Wpzr1YKOiq : 2006/06/30(金) 21:05  [URL]  ID:/mDKqX99
idは固有で同じidを複数に指定することは出来ませんが、nameなら可能だったはずです。
対象となるタグにnameを指定しておき、document.getElementsByNameで参照を取得後、forループを使って文字色を設定すればいかがでしょうか。

2   名前: Daipa : 2006/06/30(金) 21:05  ID:7bA9Rzbr
m035さん、お返事ありがとうございます。

idをnameに変えるのは分かるのですが、forループの使い方が分からないので
出来れば、変更箇所をスプリクトで書いて頂ければ有難いのですが…。
本当に、無知で申し訳ありません。よろしくお願いします。

3   名前: 牛若 : 2006/06/30(金) 21:05  ID:ZcR7Qx0J
ブロックレベルの汎用コンテナ要素にNAME属性ですか。
コードを見てみたいものですな。

4   名前: Z ◆XTzyosZXcL : 2006/06/30(金) 21:05  ID:rvat93If
 ええと、その前の基本的なお話として。
 なぜ「文字の色を"自動的に"変化させたい」のでしょう?文章を読んでいる最中に刻々と文字の色が変化していってしまったら、大変読みづらいのではないかと私などは思うのですが。
 また、FONT要素のface属性で使用フォントを指定したところで、そのフォントが使える環境でないと無意味となることに注意してください。

参考)
http://lan.rgr.jp/essay/eye
http://lan.rgr.jp/essay/invisible
http://nekoshiki.poke1.jp/guidline/color.html
http://bakera.jp/html/opinion/zannen3.html
http://bakera.jp/html/opinion/font.html

 いずれにせよ、JavaScriptなどのクライアント側スクリプトは、それが実行できる環境でないと何の意味も持ちませんし、汎用コンテナ要素であるDIV要素よりは、まずP要素などで適切にマークアップした上で、それにスタイルを適用した方がよいように私も思います。

HTMLの基本)
http://members.jcom.home.ne.jp/jintrick/Personal/markup.html

5   名前: Daipa : 2006/06/30(金) 21:05  ID:7bA9Rzbr
Zさん、ご指摘ありがとうございます。サイト作りの参考にしたいと思います。
文字の色変化は、ある項目に重複した情報があり、色自体に意味を持たせて表現しようとしています。
視障者に対しては、別データで対応できると思います。また、文章中には使用致しません。
FONT要素に関しては、ソースをコピーしてきた際に、無くてはならないものだと思いそのまま使っていました。
必要ないものなので、削除しました。DIV要素も、実際はセル内で使用しているので、必要ありませんでした。
TDに移しました。<TD id="dmA">aaa</TD>
ただ、この色変化はどうしても使用したいので、分かる方が居ましたらよろしくお願いします。

6   名前: PIANO : 2006/06/30(金) 21:05  ID:2X.0QGKX
後出しはよくない。
まず、自分のやりたい最終的なソースを貼る。
エラーがあればその内容を書く。

「実は・・・で」というのはお互い時間のムダ。

7   名前: sasame : 2006/06/30(金) 21:05  ID:F5cxQaxL
まずはじめに私もDaipaさん同様Javascript初心者です。なのでコードに関しては危険性を含んでいる可能性があることをご了承ください。
#とはいえ、一応それっぽい動作をすることは確認してます。
<HTML><HEAD>
<script type="text/javascript">
<!--
var henkaC = 0;
var i=0;
var idname ="dmC";
dcC = new Array("#000000","#ff0000");

function hyooji2(){
if (henkaC >= 1) henkaC = 0;else henkaC++;
for(i=0;i<4;i++){
 idname = "dmC"+i;
 document.getElementById(idname).style.color = dcC[henkaC];
 if(i>=4)i=0;
}
setTimeout("hyooji2()",500);
}
window.onload = hyooji2;
//-->
</script>
</HEAD>
<BODY>
<p id="dmC0">cc1</p>
<p id="dmC1">cc2</p>
<p id="dmC2">cc3</p>
<p id="dmC3">cc4</p>
</BODY>
</HTML>
# idを増やしてどうにかしてるのでDaipaさんがお望みのコードではないはずです。


ですが、私も Zさん(>4)同様スタイルシートを使用した色分けをすることをオススメしたいです。
Daipaさんは>5で視障者さん対応のために別データを作成するとおっしゃっているようですが、
JavaScript未対応(またはオフにしている)ブラウザの対応も考えなければならない以上、作成にかかる手間が2倍3倍になります。
そんな面倒なことはやめたほうが良いと思うのですが、、、まぁ、いくらでも労力をかけたいのでしたらどうぞ。
(その労力をJavaScriptを勉強する方向にもっていったほうがよっぽど建設的だと思いますが。)

8   名前: Daipa : 2006/06/30(金) 21:05  ID:7bA9Rzbr
sasameさん、ありがとうございます。

idが増えていても、私の意図と同じ事ですので有難く使わせて頂きます。
実は、逆引きデータを作っていまして、視障者さんやJavaScript未対応の方は
元のデータで対応して頂こうと思っています。
ただ、JavaScript未対応がどのぐらいの割合なのか分からないので、いろいろ
勉強して、今後、検討して行きたいと思います。

sasameさん、お手数をお掛けしました。本当にありがとうございました。

一覧へ戻る