【無料配信♪】Renta !全タテコミ作品第1話

画像をラジオボタンとして使いたいと思っています。
(onclickで画像を切り替えて選択状態にする等)

どんな方法があるでしょうか。
どなたかよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

別の環境でやったらlabelがうまく動かなかった


ので、訂正します。

<form>
<span style="display:none"><input type="radio" name="radio1" id="radio1_1" value="1" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_1').click()"><img src="off.gif" id="img1_1">項目1</span><br>
<span style="display:none"><input type="radio" name="radio1" id="radio1_2" value="2" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_2').click()"><img src="off.gif" id="img1_2">項目2</span><br>
<span style="display:none"><input type="radio" name="radio1" id="radio1_3" value="3" onClick="radiochange(this.value)"></span>
<span onClick="document.getElementById('radio1_3').click()"><img src="off.gif" id="img1_3">項目3</span><br>
</form>

<script language="javascript">
function radiochange(num){
var objimg=new Array;
objimg["1"]=document.getElementById('img1_1');
objimg["2"]=document.getElementById('img1_2');
objimg["3"]=document.getElementById('img1_3');
for (var i in objimg){
objimg[i].src="off.gif";
}
objimg[num].src="on.gif";
}
</script>
    • good
    • 0
この回答へのお礼

無事動作いたしました。

yambejpさん、丁寧に対応してくださってありがとうございました!

お礼日時:2005/11/07 10:26

データの管理方法から考えて、radioを隠してつかう


のが妥当でしょう。
onclickでonに変更することは簡単ですが、offにする
のがめんどうですネ。
総じてこんな風になるのでしょうか…
(仰々しくてすみません)

<form>
<span style="display:none"><input type="radio" name="radio1" id="radioa" value="a" onClick="radiochange(this.value)"></span>
<label for="radioa"><img src="off.gif" id="imga">aaa</label><br>
<span style="display:none"><input type="radio" name="radio1" id="radiob" value="b"
onClick="radiochange(this.value)"></span>
<label for="radiob"><img src="off.gif" id="imgb">bbb</label><br>
<span style="display:none"><input type="radio" name="radio1" id="radioc" value="c"
onClick="radiochange(this.value)"></span>
<label for="radioc"><img src="off.gif" id="imgc">ccc</label><br>
</form>

<script language="javascript">
function radiochange(num){
var objimg=new Array;
objimg["a"]=document.getElementById('imga');
objimg["b"]=document.getElementById('imgb');
objimg["c"]=document.getElementById('imgc');
for (var i in objimg){
objimg[i].src="off.gif";
}
objimg[num].src="on.gif";
}
</script>
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像をクリックしてラジオボタンにチェック

タイトルのそのままなのですが、
ロゴを募集するサイトを作成しているのですが
<label></label>でいけるかな?と思ったらできませんでした。
まだまだひよっこなので・・・。
どのような方法でもいいのでどなたかご教授ください。
よろしくお願いします~

Aベストアンサー

ちょっと質問がわかりにくいのですが、
「画像とそれに対となるラジオボタンが1セットとして、そのセットが数セット存在し手いる状態で、画像を押したらセットとなるラジオボタンを選択させたい。」
ということでしょうか?

その前提で記入します。

JavaScriptを使用してこんな感じでいかがでしょう
<input type=radio id=rdo1><img src="file.jpg" border=0 onClick="javascript:rdo1.checked=true;" style="cursor: hand;">

Q画像クリックでラジオボタン選択

いくつかの画像と、それぞれの横にラジオボタンを表示しています。
今はラジオボタンをクリックしないと画像を選択したことになりませんが、画像をクリックするだけでラジオボタンがチェックされた状態にしたいと思っています。
教えてください。よろしくお願いします。

Aベストアンサー

その画像の onClickイベントを拾って、チェックしたいラジオボタンオブジェクトに対してclick()メソッドを実行してみてください。

こんな感じ
たくさんあるならメソッドでまとめた方がいいと思います。

<IMG SRC="image.jpg" WIDTH="30" height="30" onClick="javascript:document.form1.radio1.click()">

<FORM name="form1">
<INPUT TYPE="radio" name="radio1">
</FORM>

Qラジオボタンが両方とも選択できてしまう

画像を見てわかると思いますがなぜかラジオボタンを設置したら両方とも選択できてしまう状態になってしまいました。どのようにすれば改善できますか?


<input name="21" type="radio" value="1">男性
<input name="22" type="radio" value="2">女性

Aベストアンサー

同じnameをつけましょう

QCSSで背景画像の上にラジオボタンを配置したい

画面のある一部分に背景画像があり(背景画像もCSSで配置したい)、
その背景画像の上にラジオボタンを配置したいのですが、これはCSSで実現できますか?
もし可能でしたら具体的なコード(htmlとCSS)を教えていただきたいです。
よろしくお願いします。

Aベストアンサー

普通に、background-imageを指定して、ラジオボタンをお好きな位置に・・
<div class"form">
 <form action="./cgi-bin/form.cgi">
  <p>1:<input type="radio" name="A" value="1"></p>
  <p>2:<input type="radio" name="A" value="2"></p>
  <p>3:<input type="radio" name="A" value="3"></p>
  <p>4:<input type="radio" name="A" value="4"></p>
  <p><input type="submit" vale="送信"></p>
 </form>
</div>
div.form{width:300px;height:200px;background-image:url();position:relative;}
div.form p{width:4em;text-align:center;position:absolute;left:20px;top:20px;}
div.form p+p{top: 50px;left:80px;}
div.form p+p+p{top: 150px;left:300px;}
div.form p+p+p+p{top: 250px;left:380px;}
とか・・

普通に、background-imageを指定して、ラジオボタンをお好きな位置に・・
<div class"form">
 <form action="./cgi-bin/form.cgi">
  <p>1:<input type="radio" name="A" value="1"></p>
  <p>2:<input type="radio" name="A" value="2"></p>
  <p>3:<input type="radio" name="A" value="3"></p>
  <p>4:<input type="radio" name="A" value="4"></p>
  <p><input type="submit" vale="送信"></p>
 </form>
</div>
div.form{width:300px;height:200px;background-image:url();position:relative;}
di...続きを読む

QonClickがinput type="image"だとできない!

以前、↓の質問をさせていただき解決したのですが、
input type="image" にしたいのですが、
ただ変更するだけでは、できません。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911

どのように変更したらいいでしょうか?
教えてください!

現在下記の方法でやっています。
<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<input type="button" value="White" onClick="document.body.className='white'">
<input type="button" value="Gray" onClick="document.body.className='gray'">
<input type="button" value="Blue" onClick="document.body.className='blue'"><br>
テーブル1:
<input type="button" value="White" onClick="document.getElementById('t1').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br>
テーブル2:
<input type="button" value="White" onClick="document.getElementById('t2').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br>
</form>

<table width=100% id="t1">
<tr><td>test</td></tr>
</table>
<table width=100% id="t2">
<tr><td>test</td></tr>
</table>
</body>

以前、↓の質問をさせていただき解決したのですが、
input type="image" にしたいのですが、
ただ変更するだけでは、できません。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911

どのように変更したらいいでしょうか?
教えてください!

現在下記の方法でやっています。
<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<inp...続きを読む

Aベストアンサー

type=imageを諦めたのは賢明かもしれません。

>指マークにするのって、
><a>タグで囲うしかないでしょうか?

とりあえずアンカーをつかうならこんな感じで
borderを消してやるといいでしょう。
<a href="#" onClick="document.body.className='white';"><img border=0 src="1.jpg"></a>

ブラウザによって仕様がことなりますが、
強制的にカーソルを書き換えることもできます。
<img src="1.jpg" onClick="document.body.className='white';" style="cursor:hand;">

IEでは有効ですが、FFとかではダメみたいですね

Qapacheの実行ユーザ名を取得

httpdを実行しているユーザを取得するコマンドを教えてください。
# ps alx
を試しましたが、これでは実行ユーザは表示されませんでした。

apacheの設定を見れば分かりますが、勉強のためにコマンドで取得する方法を教えてください。

ディストリビューションはVineLinuxです。

Aベストアンサー

ps auxw
で表示できます。
ただし、これでは全てのプロセスが表示されてhttpdがどれなのか見づらいため
ps auxw | grep httpd
として絞り込むのが良いでしょう。
さらに、apacheは複数の子プロセスを作り、子プロセスの実行ユーザはnobodyのことがあります。
そこで
ps auxw | grep /usr/local/apache/bin/httpd
と、フルパスで指定してあげれば親プロセスの実行ユーザを表示できます。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

QボタンをクリックでPHP文を実行

ボタンをクリックしたときのみPHP文を実行したいのですが・・・

<input type="button" onClink="<?php~?>">
でいけるかと思ったのですが、
ページ表示時に<?php~?>が実行されてしまい、うまくいきませんでした。

onClink="window.open(test.php)"
という方法以外でお願いします。

Aベストアンサー

AjaxはもともとJavaScriptの機能である非同期通信をつかったもので。Ajaxという言語があるわけではありません

Ajaxを利用するのであれば、JavaScriptのXMLHttpRequestを使って非同期通信できるような実装をしなくてはなりません
簡単にサンプルコードで書けるほど単純なものでもありません

一般的なサーバーサイドスクリプトの動作として、
ボタンを押す->サーバーへリクエストする->サーバーが処理する->クライアントに何かしらの結果を返す(出力する)です
つまり、PHP等のサーバーサイドスクリプトは、遷移させることが大前提で動作します

ですから、ボタンを押してその場でJavaScriptと同じようにPHPが動くなんてことはありえません。
ボタンを押したらサーバーにリクエストする という動作ならば可能です。

つまり
質問で言われているような
onClink="window.open(test.php)"

<form name="f1" action="test.php" method="post">
<input type="submit" name="submit" value="submit" />
</form>
等のような形になります

こういった一般的な方法だと いちいち画面が切り替わったようになってしまうのを嫌って Ajaxでコレと同じことを、画面を切り替えずに行っているだけに過ぎません

AjaxはもともとJavaScriptの機能である非同期通信をつかったもので。Ajaxという言語があるわけではありません

Ajaxを利用するのであれば、JavaScriptのXMLHttpRequestを使って非同期通信できるような実装をしなくてはなりません
簡単にサンプルコードで書けるほど単純なものでもありません

一般的なサーバーサイドスクリプトの動作として、
ボタンを押す->サーバーへリクエストする->サーバーが処理する->クライアントに何かしらの結果を返す(出力する)です
つまり、PHP等のサーバーサイドスクリプトは、...続きを読む

QPHPの関数実行

<?php
function disp(){
echo "hello world";
}
?>

<form>
<input type="text">
<input type="button" onclick="<?php disp() ?>">
</form>

といったソースを書いてみたのですが、ボタンを押してみるのですが作動しません。
どこか間違えているのでしょうか、それとも作動しないのでしょうか・・・。
当方としては、formのinputボタンを押したらPHPの関数が実行させるようにしたいのですが・・・。
どなたかご助言をお願いします。

Aベストアンサー

ウソつきました
出来ましたー

<?php

if($_REQUEST[submit] == TRUE){
function disp(){
echo "hello world";
}
}

else{
function disp(){
echo "";
}
}

?>

<form method="post" action="">
<input type="text" value="<?php disp(); ?>">
<input name="submit" type="submit"value="押せ">
</form>

Qapacheユーザの実行権限設定はどうすれば良い?

■環境
・Cent OS

■状況
・所有者hogeのディレクトリxに対して、スクリプト経由(apacheユーザ権限)でchmodしようとすると、エラーになります
・スクリプト経由(apacheユーザ権限)でディレクトリ作成しようとしても、エラーになります

■質問
・どうすれば良いでしょうか?
・所有者hogeのグループにapacheユーザを入れたら効果あるでしょうか?

・ディレクトリ所有者がhogeであることが問題? apache所有にした方が良い?
・それとも、スクリプト実行を、apacheユーザ権限ではなく、所有者hogeにした方が良い? どうやって?

・そもそもapacheユーザ権限は、一般的にどう設定するものなのでしょうか? rootみたいに最強にする?

Aベストアンサー

> 所有者hogeのグループにapacheユーザを入れたら効果あるでしょうか?

基本的にはそれでOKですが、それだけではapacheユーザが作成した
ファイルをhogeユーザが変更できなくなってしまうかもしれません。

user=hoge,group=hoge
user=apache,group=apache,groups=hoge

groupは一次グループ、groups2は二次グループです。umask002 (新
規作成されたファイルのパーミッションが775 ) に設定されている
とします。

hogeユーザが作成したファイルはhoge/hoge なので、hogeグループ
に属するapacheユーザは編集可能です。しかし、apacheユーザが新
規作成したファイルはapache/apache になるので、apacheグループ
に属さないhogeユーザは編集できません。

そこで、ディレクトリをhogeユーザで作成し、ディレクトリにsgid
ビットを立てます。

$ chmod 2775 dir
$ ls -l dir
drwxrwsr-x 2 hoge hoge 4096 4月 7 13:35 dir

これで、apacheユーザがdir上に作成したファイルはapache/apache
ではなく、apache/hoge になるので、hogeユーザも編集できるよう
になります。

> 所有者hogeのグループにapacheユーザを入れたら効果あるでしょうか?

基本的にはそれでOKですが、それだけではapacheユーザが作成した
ファイルをhogeユーザが変更できなくなってしまうかもしれません。

user=hoge,group=hoge
user=apache,group=apache,groups=hoge

groupは一次グループ、groups2は二次グループです。umask002 (新
規作成されたファイルのパーミッションが775 ) に設定されている
とします。

hogeユーザが作成したファイルはhoge/hoge なので、hogeグループ
に属するapacheユーザは編集可能...続きを読む


人気Q&Aランキング