時間でlink, vlink, alinkの文字色変えたい

2023/07/30 10:39

このQ&Aのポイント

時間を利用してリンク文字（link, vlink, alink）の文字色を変えたい
使用しているスクリプトでリンク文字（link, vlink, alink）の色が変わらないため、背景によっては見えにくい文字色になる
リンク文字を時間で変化させる方法を知りたい

ベストアンサー

時間でlink, vlink, alinkの文字色変えたい

2004/10/07 11:47

時間で、文字色や背景を変更するスクリプトを使っています。しかし、リンク文字（link, vlink, alink）の色が変わらないため、背景によっては見えにくい文字色となってしまいます。リンク文字も同様に時間で変化させたいのですが、どのようにすれば良いでしょうか？お分かりの方がいらっしゃいましたら、ご教授お願い致します。(>_<) 使っているスクリプトは以下のような感じです。 -------------------------------------------- TimeH = (new Date()).getHours(); if (TimeH>=0 && TimeH<=12) {myBG="url(./xxxxx/bg_01.jpg)"; myBGcolor="#FF00FF"; myColor="#FFFFFF";} else if (TimeH>=13 && TimeH<=24) {myBG="url(./xxxxx/bg_02.jpg)"; myBGcolor="#00FF00"; myColor="#000000";} myOP = window.opera; myN6 = document.getElementById; myIE = document.all; if (myOP) myBR="O6"; else if (myIE) myBR="I4"; else if (myN6) myBR="N6"; else myBR=""; function bg1(){ if (myBR == "I4"){ document.all.bdy1.style.background = myBG; document.all.bdy1.style.backgroundColor = myBGcolor; document.all.bdy1.style.color = myColor; } else if (myBR == "N6" || myBR == "O6") { document.getElementById("bdy1").style.background = myBG; document.getElementById("bdy1").style.backgroundColor = myBGcolor; document.getElementById("bdy1").style.color = myColor; } } <BODY ID=bdy1 onload="bg1()">

honey_sweets
お礼率80% (328/407)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

caitsith_goo
ベストアンサー率59% (28/47)

2004/10/07 17:24 回答No.2

例えばですが、 if (TimeH>=0 && TimeH<=12) { myBG="url(./xxxxx/bg_01.jpg)"; myBGcolor="#FF00FF"; myColor="#FFFFFF"; myBG2="url(./xxxxx/bg_03.jpg)"; myBG2color="#AAAAAA"; myColor2="#AAAAAA"; } else if (TimeH>=13 && TimeH<=24) { myBG="url(./xxxxx/bg_02.jpg)"; myBGcolor="#00FF00"; myColor="#000000"; myBG2="url(./xxxxx/bg_04.jpg)"; myBG2color="#BBBBBB"; myColor2="#BBBBBB"; } 省略 if (myBR == "I4"){ document.all.bdy1.style.background = myBG; document.all.bdy1.style.backgroundColor = myBGcolor; document.all.bdy1.style.color = myColor; document.all.d1.style.background = myBG2; document.all.d1.style.backgroundColor = myBGcolor2; document.all.d1.style.color = myColor2; for(var i=0; i<document.links.length; i++) { document.links[i].style.color=myColor; } } <div id="d1"> とすると背景の画像だけではなく文字色なども変えられるようになります。 onloadはその画面（body）を読み込んだときに実行されるので、<body>タグの中にだけ記述すれば大丈夫ですよ。

質問者

お礼 2004/10/07 17:59

ありがとうございました！バッチリできました。 CGIで変えるプログラムはあったのですが、動作が少し重いような気がしてたので、JavaScriptで作りたかったので助かりました！ほんとうにありがとうございました。(>_<)

その他の回答 (1)

caitsith_goo
ベストアンサー率59% (28/47)

2004/10/07 12:59 回答No.1

if (myBR == "I4"){ document.all.bdy1.style.background = myBG; document.all.bdy1.style.backgroundColor = myBGcolor; document.all.bdy1.style.color = myColor; for(var i=0; i<document.links.length; i++) { document.links[i].style.color=myColor; } } とするのはどうでしょうか。

質問者

補足 2004/10/07 16:41

どうもありがとうございます。うまく出来ました！(>_<) もし、ご存知でしたら、もう一点ご教授下さいませ。背景（バックグランド画像）の時間による変更についてですが、上のように<BODY>タグ内で指定する場合の他に、 <div style="background:url(/xxxx/bg.jpg)"> のように<div>タグ内で指定した、背景のバックグランド画像も時間で変更させたいのですが、 <div>タグ内でスクリプトを使うにはどう記述すればよろしいでしょうか？ <div>内で、IDは使えるようなのですが、onloadが使えないみたいなのです。 <div ID=bdy1 onload="bg1()">と記述しても、上手く動作しませんでした。もし、ご存知でしたら、ご教授下さいませ。よろしくお願い致します。(>_<)

関連するQ&A

ブログのｈｔｍｌのリンクを触ったらおかしくなりました。
自分のブログからホームページにリンクをしていたのですが、ちょっと触ったらクリックしても飛ばなくなってしまいました。どこがおかしいのか分からなくなってしまいました。頭のいいひと教えてください。 <body onload="myFunc()"> <SCRIPT language="JavaScript"></SCRIPT> <a href="http://yurari5227307.web.fc2.com/index.html" STYLE="text-decoration:none" target="new"><font size="5"color="#ffffff"><TABLE> <TR><strong><TD BGCOLOR="#000000"><DIV id="myIDstr">整体院癒らりホームページはこちらから!</DIV></TD></strong></TR></TABLE></font></a> // --></SCRIPT>から上は文字の色をリアルタイムに変えるためのものです。
- ベストアンサー
- HTML
jsのfunctionの中に変数の入れ方について
jsのfunctionの中にDiaDay定義の変数を入れたいです。下はもともとの構文です。 function changeDiaType() { if(DiaDay == 0 && 1) { document.getElementById("todayDiaDaySpan").innerHTML = "土・休日ダイヤ"; document.getElementById("todayDiaDaySpan").style.backgroundColor = "#fcf"; DiaDay = 2; } else if(DiaDay == 0 && 2) { document.getElementById("todayDiaDaySpan").innerHTML = "　土曜ダイヤ　"; document.getElementById("todayDiaDaySpan").style.backgroundColor = "#0f0"; DiaDay = 1; } else { document.getElementById("todayDiaDaySpan").innerHTML = "　平日ダイヤ　"; document.getElementById("todayDiaDaySpan").style.backgroundColor = "#9ff"; DiaDay = 0; } 次のfunction changeDiaType()の()の中にDiaDayで定義した変数を入れたいのですが、どのように記述すればよいのでしょうか。記述は省略せずに全部お書きくだされば幸いです。
- ベストアンサー
- JavaScript
jsで関数宣言→関数式の変換の仕方をご教授ください
以下は、javascriptの構文の一部です。構文の中で、function changeDiaType(DiaDay)と書くと、構文チェックサイトで、関数宣言→関数式への返還を求められました。関数宣言→関数式への変換をお願いいたします。省略なしでお願いします。 function timeButtonInterfaceUpdate() { //引数がtrueなら、リアルタイムモードのインタフェースに if(true) { realtimeUpdate = true; document.getElementById("realTimeModeStatusDiv").innerHTML = "　リアルタイム表示中　"; //ドロップダウンリストの有効化 document.form1.updateIntervalSelect.disabled = false; } else { realtimeUpdate = false; document.getElementById("realTimeModeStatusDiv").innerHTML = "リアルタイム表示にする"; //ドロップダウンリストの無効化 document.form1.updateIntervalSelect.disabled = true; //もしタイマーが事前にかかっていたら、止める clearInterval(updateIntervalTimer); function changeDiaType(DiaDay) { if(DiaDay == 2) { document.getElementById("todayDiaDaySpan").innerHTML = "土曜ダイヤ"; document.getElementById("todayDiaDaySpan").style.backgroundColor = "#fcf"; DiaDay = 2; } else if(DiaDay == 1) { document.getElementById("todayDiaDaySpan").innerHTML = "土・休日ダイヤ"; document.getElementById("todayDiaDaySpan").style.backgroundColor = "#fcf"; DiaDay = 1; } else { document.getElementById("todayDiaDaySpan").innerHTML = "　平日ダイヤ　"; document.getElementById("todayDiaDaySpan").style.backgroundColor = "#9ff"; DiaDay = 0; } }}}
- ベストアンサー
- JavaScript
クリックで色変更後に既に変更された要素を戻すには
javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが３つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。質問したい内容は、「１箇所をクリックした時に、他の２箇所の色を戻す」方法です。以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- １箇所をクリックした時に、他の２箇所の色を戻すには「00をクリックした時に、01の色を戻す02の色を戻す」のように、３箇所全てに記述しなければならないのでしょうか？テーブルのブロックが少なければ、これでもいいのですが、たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。他になにか効率のいい記述の仕方はありますでしょうか？ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
文字を隠すゲーム
ゲームを作っています。ページを更新するたびに２０種類のことわざから１つが表示されます。１文字ずつテーブルのセルにいれていくのですが、隠れています。文字の隠れてる部分をクリックすると文字が現れるのですが、文字数の半分が現れたら　プロンプトで「ことわざを予想してください」と表示。ユーザに答えさせる、というゲームです。文字数の半分、文字を隠すをイベントハンドラで表現したのですが、左から半分の文字だけが現れる関数になってしまいました。ことわざの文字数が半分現れたら…　という状況にしたいのですが、行き詰ってます。コードは以下のとおりです。何かアドバイスをいただけないでしょうか。 <script language="JavaScript"> "); document.write ("</style>"); } function setEvent(){ if (!document.getElementById) return; var elms = document.getElementsByTagName("span"); for(i = 0; i < elms.length/2; i++){ elms[i].onclick=show; } } function show(e){ if(window.event) obj =window.event.srcElement; else if(e) obj = e.currentTarget; obj.style.backgroundColor="ivory"; obj.style.color="black"; } //--> </script>
- ベストアンサー
- JavaScript
これは何をするスクリプトですか？
<head> <script type="text/javascript">  </script> </head> <body onload="loading()"> 詳細は略して書いています。プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。皆様には簡単かとは思いますが、よろしくお願いします。
- ベストアンサー
- JavaScript
選んだ文字列を表示させる方法について
JavaScriptを使って,ドラッグで選んだ文字列を，同じページ内に，抜き出して表示させることを考えています。いろいろなページを参考にして,以下のように作ってみましたが,どうもうまく動きません。具体的には,文字を選ぶと[object]と表示されてしまいます。アドバイスをお願いします。 <html lang="ja"> <head> <script type="text/javascript"> function doAlert(){ if(document.all){ var s = new String; s=document.selection.createRange(); if (document.all) { his.innerHTML = s; } else if ( document.layers ) { document.his.document.open(); document.his.document.write(s); document.his.document.close(); } }else if(document.getElementById){ s=window.getSelection(); document.write(s); } } document.onmouseup=doAlert; </script> </head> <body> <div id="div1" style="font-size:24pt"> 選択してください。 </div> <hr> <DIV id="his" style="position: absolute;"> <P>上の文をドラッグすると，ここに選んだ文字列が表示されます</P> <hr> </DIV> </body> </html>
- ベストアンサー
- JavaScript
javascript　スライドバー
ダイナミックHTMLに掲載されている jsでのスライダーを同一ページで複数使いたいのですがどおうすればいいでしょうか？ <body onLoad="Init()">で読み込んでいます。詳しい方がいましたらご教授お願い致します。 var iniX = 150; //バーの初期位置(x) var iniY = 0; //バーの初期位置(y) var dY = -45; //バーに対するスライダーの表示位置(y) var dX1 = 0; //バーに対するスライダーの表示位置(x,最も左) var dX2 = 330; //バーに対するスライダーの表示位置(x,最も右) var valx = -120; //バーに対する数値を表示する位置(x) var valy = -120; //バーに対する数値を表示する位置(y) var minValue = 0; //最小値 var maxValue = 1500; //最大値 var iniValue = 0; //初期値 var M_flag = false; var mdx,mdlayx,mmx,mmlayx; var xmax,xmin; function Init(){ dx = dX2 - dX1; x = dx * ((iniValue - minValue) / (maxValue - minValue)); xmin = iniX + dX1; xmax = iniX + dX2; if(document.all){ document.all("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.all("iLf").style.posLeft = xmin + x; document.all("iLf").style.posTop = iniY + dY; document.all("iLb").style.posLeft = iniX; document.all("iLb").style.posTop = iniY; document.all("iLv").style.posLeft = iniX + valx; document.all("iLv").style.posTop = iniY + valy; document.all("iLv").innerHTML = iniValue; }else if(document.layers){ }else if(document.getElementById){ document.getElementById("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.getElementById("iLf").style.left = xmin + x+"px"; document.getElementById("iLf").style.top = iniY + dY+"px"; document.getElementById("iLb").style.left = iniX+"px"; document.getElementById("iLb").style.top = iniY+"px"; document.getElementById("iLv").style.left = iniX + valx+"px"; document.getElementById("iLv").style.top = iniY + valy+"px"; document.getElementById("iLv").innerHTML = iniValue; document.testimg.width = iniValue/4.5; document.testimg.height = 35; } } function Mdown(e){ if(document.all){ mdx = event.x; mdlayx = document.all("iLf").style.posLeft; }else if(document.layers){ }else if(document.getElementById){ mdx = parseInt(e.pageX); mdlayx = parseInt(document.getElementById("iLf").style.left); } M_flag = true; return false; } function Mup(e){ M_flag = false; return false; } function Mmove(e){ if(document.all){ if(M_flag){ mmx = event.x; mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.all("iLf").style.posLeft = mmlayx; document.all("iLv").innerHTML = x; } event.returnValue = false; }else if(document.layers){ }else if(document.getElementById){ if(M_flag){ mmx = parseInt(e.pageX); mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.getElementById("iLf").style.left = mmlayx+"px"; document.getElementById("iLv").innerHTML = x; document.testimg.width = x/4.5; document.testimg.height = 35; } return false; } }
- 締切済み
- JavaScript
popupウィンドウでborderがcollapseなテーブル利用の問題
popupウィンドウにテーブルを使用していて、 border-collapse: collapse　のボーダーがある場合に、初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。そこで非表示にするためのjavascript をonloadで動かしているのですが、データ量の大きいページだと、表示された後に消えるのが見えてしまい不細工です。最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script>  </script> <style>  </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>
- ベストアンサー
- HTML
javascriptでクリックするごとにセルの色を変えたい
javascript初心者です。現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。現在下記のように作っていますがエラーが起きてしまいます。どのように直せばよいかご教授願います。 <script type="text/javascript">  </script> <body> <table border="1" cellpadding=20> <tr> <td onClick = "onC(this)"><br> </td> </tr> </table> </body>
- ベストアンサー
- JavaScript