• ベストアンサー

ＪａｖａＳｃｒｉｐｔだとおもうんですが・・・

たとえば、 ―――――――――――――――― ここを押して→○ ―――――――――――――――― と表示されるＨＴＭＬ文章をつくったとします。 そうしたときに、「○」をクリックした後に○の部分だけが「×」に変化するようなものにするためにはどういった文章が必要なのでしょうか？？ ―――――――――――――――― ここを押して→× ―――――――――――――――― という表示されるＨＴＭＬをあらかじめ作って、リンクして置くというのは無しで。。。 最終的には、ある色の■をくりっくすると背景がこの色に変化して、なおかつそのクリックした■の表示だけが×に変化するようにしたいんです。 例でいうと、フォントを赤色にした■をクリックすると、背景が赤色になり、かつ始め赤色だった■が黒フォントの×になる。といったものです。 背景を変える方法はわかっているのですが、■を×にかえる方法がわかりません。 JavaScriptでできるのではないかとおもっているのですが、どうすればいいのですか？

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

  • ベストアンサー
  • mirurin
  • ベストアンサー率43% (48/111)
回答No.3

> この<a href=...></a>のなかに教えてくださった > > をいれてみても、変化しません。<a href=...></a>から外にだしてやると変化します。 <a href=...></a>の中に入れてみて変化しないように見えるのは、 文字が切り替わった直後に、aタグにより同じページにジャンプされているからだと思います。 サンプルを作成してみましたので、よかったら参考にしてください。 ----------------------------------------------------------------- <script> <!-- // 背景色配列 color = new Array(); color[0] = "black"; color[1] = "red"; color[2] = "blue"; function change(colcode,colname) { // 背景色の変更 document.bgColor = colname; // 文字の変更（■→×） for (i=0; i<color.length; i++) { if (color[i] == colname) { eval("document.all." + color[i] +"_1.style.display = 'none';"); eval("document.all." + color[i] +"_2.style.display = '';"); } else { eval("document.all." + color[i] +"_1.style.display = '';"); eval("document.all." + color[i] +"_2.style.display = 'none';"); } } } //--> </script> <body> <span id="black_1"> <a href="javascript:change('#000000','black')"><font color=#000000>■</font></a> </span> <span id="black_2" style="display:none;"> <font color=#FFFFFF><b>×</b></font> </span> <span id="red_1"> <a href="javascript:change('#FF0000','red')"><font color=#FF0000>■</font></a> </span> <span id="red_2" style="display:none;"> <font color=#FFFFFF><b>×</b></font> </span> <span id="blue_1"> <a href="javascript:change('#0000FF','blue')"><font color=#0000FF>■</font></a> </span> <span id="blue_2" style="display:none;"> <font color=#FFFFFF><b>×</b></font> </span> </body>

anpankudasai
質問者

お礼

できました！ありがとうございました

その他の回答 (2)

  • mirurin
  • ベストアンサー率43% (48/111)
回答No.2

<script> function change() { document.all.a.style.display = 'none' document.all.b.style.display = ''; } </script> ここを押して→ <span id="a" onClick="change()">○</span><span id="b" style="display:none;">×</span> これでどうでしょう？ IE4以上、N6以上なら対応してます。

anpankudasai
質問者

お礼

補足の補足で「お礼」欄をつかうことをお許しください。 言い忘れましたが、自分はIE６を使っています。

anpankudasai
質問者

補足

ご回答ありがとうございます。やってみたのですが、 背景を変えるのに、<script>の間に、 <!-- if(location.search == "?black") { document.bgColor = "#000000"; } else if(location.search == "?red") { document.bgColor = "#FFe4e1"; } else if(location.search == "?white") { document.bgColor = "#ffffff"; } //--> <body>部分に、 <a href="?black" class="lp"><font color=000000>■</font></a> <a href="?red" class="lp"><font color=ffe4e1>□</font></a> <a href="?white" class="lp"><font color=000000>□</font></a> といったように記述していたのですが、この<a href=...></a>のなかに教えてくださった <span id="a" onClick="change()"> □ </span> <span id="b" style="display:none;"> × </span> をいれてみても、変化しません。<a href=...></a>から外にだしてやると変化します。どうすればいいですか？よろしくお願いしますｍ(_ _)ｍ

  • twk
  • ベストアンサー率29% (18/62)
回答No.1

できないことはないですが、ブラウザ限定になりますね。IE5, NN6以上ならばinnerHTMLを使えば出来ると思います。NN4だとまた別の方法が必要になります。 文字よりも、画像を切り替える方が楽ですので、■と×の画像を用意しておいてそれを切り替えるようにすることをお薦めします。画像オブジェクトのsrc属性を書き換えれば画像が変わります。

anpankudasai
質問者

お礼

補足の補足で「お礼」欄をつかうことをお許しください。 言い忘れましたが、自分はIE６を使っています。

anpankudasai
質問者

補足

はやい回答ありがとうございます！ 画像にするとしたら、どういう風に書けばいいですか？？ javascriptまるっきり初心者で、しかも手持ちの本にものってないようで・・・よろしくおねがいしますｍ(_ _)ｍ

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptかPHPを使って表示枚数をあらわす方法

    画像をつかって現在表示している画像の枚数（7枚中1枚目といった感じの）をあらわす方法を探しています。 PHPかJavaScriptでいけるのではないかと思うのですが・・・ 添付画像のように、丸を画像の枚数分用意し、 （画像数もフォルダによって変化します。） 表示されているページの丸は色が変化するようにしようと おもっています。 また、フォルダによって画像数も変化するので、 この丸の画像も減少しないといけません。 また、1枚目の画像を表示時に、3枚目の画像の丸を押した場合、 3枚目の画像にリンクしていて、3枚目の画像が表示されるように したいのです。 かなりややこしいのですが、 どなたかご教授いただけないでしょうか！ 宜しくお願いします！！！

  • 背景色変更のJavaScriptに手を加えて頂けませんか？

    <SCRIPT language="JavaScript"> <!-- function setBackgroundColor(pal) { document.bgColor=pal; } // --> </SCRIPT> <a href="javascript:setBackgroundColor('#FFFFFF')"><font color="#FFFFFF">背景色変更！</font></a> 上記は、クリックすることで背景色を変えるスクリプトですが、 これにちょっと手を加えてみたくて質問しました。 一つのページの中に、インラインフレーム（名称：f1）があります。上記スクリプトの「背景色変更！」をクリックしたとき、インラインフレーム内の背景色も同時に変えるにはどうしたらいいのですか？

  • ワードのコメント

    ワードを弄くっていたら、コメントが付いた文章になってしまいました。 右クリックでコメントは消えるのですけど、それ以降、続けて文章を書いていくと、文字の色が赤（コメントと同じ色）になってしまい、色が変えられません。 「フォントの色」をクリックすると、またコメントが出てきてしまいます。 どうしたら元のように、文字の色が黒でコメントは無いようになりますか？

  • Javascript/オンマウスで画像を変える

    洋服のネットショップを作成中です。 一つのタイプで数色ある洋服（例えば、黒、白、赤、青の4種類）の場合、「Javascriptのオンマウスで画像を変えるhttp://www.aimix.jp/javascrip.html」を利用し、「黒」「白」「赤」「黒」と表示された部分にマウスをあてると、洋服の画像が変わるようにしたいと思っています。 この場合、そのページは画像1枚毎に重く(開く時間が長く)なっていくのでしょうか。 つまり、色が4色の場合と色が10色の場合とでは、表示されている画像は一枚ですが、開く時間は4画像分と10画像分の違いが発生するのでしょうか。 ご存知の方、教えていただければ幸いです。

  • JavaScript文字色

    ホームページビルダー６．５でJavaScriptが用意されていて、最終更新日時を表示できるのですが、文字色が黒なんです。 色を指定することは出来るのでしょうか？ JavaScriptサンプルのページで見ても、皆、黒で、色に関する設定は探せなかったのですが・・・ よろしくお願いいたします。

  • JavaScriptについて

    JavaScriptで指定した部分の色を変える方法ってどうすれば・・・ http://www.sky.sannet.ne.jp/masapine/java_top.html ↑で背景の色を変えるやり方は、のってあるんですけど部分的にするにはどうすればいいのか分かりません。 サイトなどあれば尚うれしいのですが。

  • JavaScriptで背景や文字色を色→色へ自動で変える方法

    JavaScriptで背景や文字色を色→色へ自動で変える方法 例えば、赤から青へ、青になったらまた赤に色が徐々に変わり、自動的にループしてくれるようなものを探しています。 検索したところcolortweenというjsを発見したのですが、どうやって使えばいいのかわかりません。 ご回答よろしくお願い致します。

  • javascript voidについて

    ブログ上にて Ａボタンをクリック　⇒　新しいウインドウで指定サイトＡへ接続 クリック後に 指定サイトＢへのテキストリンクを表示 これを行うにはどうしたらいいでしょうか？ javascript voidを使えばいいような感じで、ネット等で調べると 出てくるのですが、初心者のためわかりません。 ＨＴＭＬの初歩くらいの知識なので、 分かりやすく教えて頂きたいです。 javascript void以外でも方法があればなんでもいいです。

  • Open Office　Calc の条件付き書式

    Excelで作成したファィルをOpen Office Calcで開いたとき、条件付き書式におけるフォントの色が下記の例のように変化してしまいます。 何か対策、方法等がありましたら教えてください。 例　(1)セルの値が０より大のとき、セルの背景を赤、フォントを白 　　 (2)セルの値が０より小のとき、セルの背景を青、フォントを白 この条件で(1)は正常に移行しますが、(2)は背景は青のままです がフォントの色が赤に変わってしまいます。

  • JavaScriptについて。

    今、HPを作成しています。 その中で、「時間ごとに表示するテキストを変える」JavaScriptを取り入れようと思っているのですが、あれって時間ごとに色を変えたりフォントやサイズを変えることってできないのでしょうか？ いろんなサイトに行っても、基本的なソースしか載っていなくて困っています。わかる方いたら教えていただけると嬉しいです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する