ローンのシュミレーションページを作成してます。


「計算する」のボタンを画像にしたいと考えています。

↓以下の書き方ですとうまく動作するのですが、
<input type="button" value=" 計 算 " onClick="calc(this.form)" name="button">

↓このように画像のボタンにしてみたのですが、うまく動作しません。
<input type="image" src="*****.PNG" border="0" alt="計算" onClick="calc(this.form)" name="button">

どのようにすれば、動作するのでしょうか?
正しい書き方を教えてください。

回答の条件
  • 1人5回まで
  • 登録:2008/07/02 00:52:49
  • 終了:2008/07/02 20:19:02

回答(4件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912008/07/02 01:11:32

ポイント33pt

input の type=image は submit を兼ねた動作になるため、onClick だけではうまくいきません。


下記にもありますが、input にこだわる必要がなければ、img の onClick アクションを

使用してはどうでしょうか。

どうしても input を使用する際は、form の submit 側で対応が必要です。

http://support.microsoft.com/kb/822276/ja

http://oshiete1.goo.ne.jp/kotaeru.php3?q=2085855

http://oshiete1.goo.ne.jp/qa2846891.html?ans_count_asc=1

id:matun55

【通常のボタン】これはうまく動作します。

<input type="button" value=" 計 算 " onClick="calc(this.form)" name="button">

<input type="reset" value=" リセット " onClick="ClearIP(this.form)" name="reset">

imgのonClick アクションを使用してみたのですが、そうすると「リセットボタン」がうまく動作しなくなりました。

また、FFでカーソルが指の形になりません。(style="cursor:hand;")が通用しません。

【imgのonClick アクション↓】

FFでのカーソルの指の形は妥協できますが、

リセットボタンはどのようにしたら宜しいのでしょうか?

大変お手数をおかけしますが、よろしくお願いします。

2008/07/02 02:12:42
id:lame-delegate No.2

lame-delegate回答回数85ベストアンサー獲得回数102008/07/02 09:15:56

ポイント14pt

image タイプのinput でなくても、同じ見た目でいいというならCSSを使えばいいのではないでしょうか。

submit以外のなんにでも使うことができるので便利ですよ。

<input type="submit" alt="計算" value="" style="background: url(*****.png) no-repeat;width:画像の幅;height:画像の高さ;border:none;" onClick="calc(this.form)" name="button">

id:matun55

それでは、以下と同じで、うまく動作しません。

<input type="image" src="*****.PNG" border="0" alt="計算" onClick="calc(this.form)" name="button">

2008/07/02 11:04:59
id:hirotow No.3

hirotow回答回数131ベストアンサー獲得回数102008/07/02 16:15:00

ポイント10pt

素直に、

<button type="submit" style="border:none; background:transparent;">計算</button>

のようにしてはどうでしょうか?

id:matun55

<input type="image"と同様、動作しません。</p>

2008/07/02 20:15:33
id:kebo987654 No.4

kebo987654回答回数38ベストアンサー獲得回数102008/07/02 16:27:58

ポイント33pt

ボタンの画像にonclickを指定しても私のIE,FFでは正常に動きましたよ。

(カーソルの形はstyle="cursor:pointer"で解決)

<img src="*.png" alt="計算" onclick="calc(this.form)" name="button" style="cursor:pointer">

もしかするとリセットボタンが動かなくなるのはClearIP関数の問題に起因するのではないでしょうか。

普通に入力されたフォームの内容をデフォルトに戻すのであればtype="reset"だけで動作しますから、以下のようなコードではダメですか?

<?xml version="1.0" encoding="Shift_JIS"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />

<meta http-equiv="content-script-type" content="text/javascript" />

<meta http-equiv="content-style-type" content="text/css" />

<title>ローンのシュミレーション</title>

</head>

<body>

<form action="example.cgi" method="post" name="form">

<input type="text" value="" name="text1" /><br />

<img src="***.png" alt="計算" onclick="calc(this.form)" style="cursor:pointer" name="button" /> <input type="reset" value=" リセット " />

</form>

</body>

</html>

id:matun55

計算で、img

リセットで、input

とすれば動作するのはわかっておりますが、出来れば統一したい考えで困ってます。

でも、別で動作すればいいのかな。って思うようになりました。

ありがとうございます。

2008/07/02 20:16:55
  • id:Mook
    なかなか推測だけでは原因がわかりません。
    関係する部分のコードを開示できませんか。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません