(チェックを入れないと、「チェックを入れてください」などの警告が出て、画面が進まない、という感じで)
ボタンが2つあること、画像であることで、初心者の私はすっかり躓いています。
よろしくお願いいたします。
----------
申し訳ないですが、
「ここに例がたくさんある」
「画像ボタンじゃなくてラジオボタンなら」
などの回答はご遠慮いただきたく…。
初心者なので、そのものズバリのスクリプトを回答(またはURLを)いただけるとうれしいです。
<HTML>
<HEAD>
<BASE HREF=”http://nifberry.727.net/”>
</HEAD>
<BODY>
<!-- まずフォームに名前を付けます -->
<form name=”form1”>
<!-- CheckBoxにも名前を付けます -->
<input name=”check1” type=”checkbox”>遊びに行く
<!-- 画像ボタンにも名前を付けます
onMouseOver カーソルが上に来た時のイベント
onMouseOut カーソルがはみ出た時のイベント
onMouseDown ボタンを押した時のイベント
onMouseUp ボタンを離したときのイベント
Bupの最初のパラメータが画像の種類
2つ目のパラメータが1の時は普通の画像2の時は、押した時の画像です
-->
<img name=”hk_button” src=”/test/hoiku.gif” height=”76” width=”252” onMouseOver=”Bup(1,1)”
onMouseOut=”Bup(1,1)” onMouseDown=”Bup(1,2)” onMouseUp=”Bup(1,1)”>
<img name=”ak_button” src=”/naver/akiinsky.gif” height=”76” width=”252” onMouseOver=”Bup(2,1)”
onMouseOut=”Bup(2,1)” onMouseDown=”Bup(2,2)” onMouseUp=”Bup(2,1)”>
</form>
</BODY>
<script language=”javascript”>
<!-- //
function Bup(is,img){
if(img==1){
if(is==1){
//通常の画像1 images の後にボタンの名前が入ります
document.images(”hk_button”).src=’/test/hoiku.gif’;
}
else{
//通常の画像2 images の後にボタンの名前が入ります
document.images(”ak_button”).src=’/naver/akiinsky.gif’;
}
}
else{
// ここで、チェックが入っているか確認します、フォームとチェックボックスの名前がココに入ります
if(!document.forms[”form1”].elements[”check1”].checked){
alert(”チェックされてません”);
// 処理しないで戻ります
return;
}
if(is==1){
//押している画像1 images の後にボタンの名前が入ります
document.images(”hk_button”).src=’/test/hoiku2.gif’;
// ジャンプしますURL2
location.href=”http://d.hatena.ne.jp/hoiku/”;
}
else{
//押している画像2 images の後にボタンの名前が入ります
document.images(”ak_button”).src=’/naver/akiinsky2.gif’;
// ジャンプしますURL2
location.href=”http://d.hatena.ne.jp/aki73ix/”;
}
}
}
// -->
</script>
</HTML>
こんなかんじかな?
以下をテキストファイルに貼り付けて、ファイル名を「xxx.html」にすればで出来ます。
あとは、適当に画像や飛び先を変更してください。
<html>
<head>
<script languarge=”JavaScript”>
<!--
function gotoNextPage(){
for(var i=0;i<document.test_form.test_radio.length;i++){
if(document.test_form.test_radio[i].checked){
if(i==0) location.href=”http://www.google.ne.jp/”;
if(i==1) location.href=”http://www.yahoo.co.jp/”;
return;
}
}
alert(’選択されていません。’);
}
-->
</script>
</head>
<body>
<form name=”test_form”>
google<input type=”radio” name=”test_radio”> yahoo<input type=”radio” name=”test_radio”>
</form>
<img src=”img1” onClick=”gotoNextPage()” alt=”画像ボタンA”>
<img src=”img1” onClick=”gotoNextPage()” alt=”画像ボタンB”>
</body>
</html>
<html>
<head><title>test</title>
<script language=’JavaScript’>
function examcb(){
if(F1.C1.checked || F1.C2.checked || F1.C3.checked ){
return true;
}else{
alert( ”どれかCheckして” );
return false;
}
}
</script>
</head>
<BODY>
<form name=F1 meshod=POST onSubmit=’return examcb()’>
<input type=checkbox name=’C1’>
<input type=checkbox name=’C2’>
<input type=checkbox name=’C3’>
<input type=image src=”bks0.gif” onClick=’F1.action=”http://www.asahi.com/”’>
<input type=image src=”bks1.gif” onClick=’F1.action=”http://www.hatena.ne.jp/list”’>
</form>
</body>
フォーム内の画像ボタンのonClickハンドラで、個別のURLでactionプロパティを書き換え、
その直後に動作する、onSubmitハンドラでチェックボックスの状態を評価しています。
falseを返せばsubmitはされません。
チェックする関数の内容はフォームに合わせて直してください。
詳しい解説までありがとうございます!
勉強になります。
うまく動きました。
<form name=”form”>
<input type=”button” onClick=”btn_a_onclick();”>
<input type=”button” onClick=”btn_b_onclick();”>
<input type=”checkbox” name=”check_a”>
<input type=”checkbox” name=”check_b”>
</form>
等と、画像ボタン側にonClickイベントを仕込んでおいてJavaScriptで、
function btn_a_onclick() {
if (!document.form.check_a && !document.form.check_b) {
alert(”どちらかをチェックしてください”);
}
if (document.form.check_a) {
location.href = ”http://aaa.com”;
}
if (document.form.check_b) {
location.href = ”http://bbb.com”;
}
}
などと書いてあげると上手く動くのではないでしょうか。
ありがとうございます。
うーん、やってみたのですが、アラートが出ない…??
あとは、ボタンが画像だったら嬉しかったですね。
でも勉強になりました。ありがとうございます。
ありがとうございます。
言葉足らずで申し訳ありませんでした。意図したのは、
「チェックボックスは一つ」で、
「チェックが入っていると、Aを押すとurlAに飛び、Bを押すとurlBに飛ぶ」
といった感じです。
(ボタンA,Bに違うURLが割り当てられている感じ?)