プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：anpankudasai
  • 質問日時：
  • 回答数：3件

たとえば、
――――――――――――――――
ここを押して→○
――――――――――――――――
と表示されるＨＴＭＬ文章をつくったとします。
そうしたときに、「○」をクリックした後に○の部分だけが「×」に変化するようなものにするためにはどういった文章が必要なのでしょうか？？
――――――――――――――――
ここを押して→×
――――――――――――――――
という表示されるＨＴＭＬをあらかじめ作って、リンクして置くというのは無しで。。。

最終的には、ある色の■をくりっくすると背景がこの色に変化して、なおかつそのクリックした■の表示だけが×に変化するようにしたいんです。
例でいうと、フォントを赤色にした■をクリックすると、背景が赤色になり、かつ始め赤色だった■が黒フォントの×になる。といったものです。
背景を変える方法はわかっているのですが、■を×にかえる方法がわかりません。
JavaScriptでできるのではないかとおもっているのですが、どうすればいいのですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： mirurin
  • 回答日時：

> この<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/03/03 20:30

No.2

  • 回答者： mirurin
  • 回答日時：

<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以上なら対応してます。

この回答への補足

ご回答ありがとうございます。やってみたのですが、
背景を変えるのに、<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>から外にだしてやると変化します。どうすればいいですか？よろしくお願いしますｍ(_ _)ｍ

補足日時：2003/02/28 13:45
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/02/28 13:54

No.1

  • 回答者： twk
  • 回答日時：

できないことはないですが、ブラウザ限定になりますね。

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

この回答への補足

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

補足日時：2003/02/28 01:51
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/02/28 13:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報