HTML にロールオーバー送信ボタンがあります。
<input type="image" id="join" name="join" src="images/join.png" value="join">
そして、ロールオーバー/ホバー機能に JS コードを使用します。
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#join').hover(
function(){
$(this).attr({ src : 'images/rollover/joinOver.png'});
},
function(){
$(this).attr({ src : 'images/join.png'}); }
);
});
</script>
Firefox と IE を除くすべてのブラウザで問題なく動作します。通常の「送信」ボタン ( input type = "submit"
) を追加すると、どこでも問題なく動作します。
type="submit"
HTML を挿入してから、CSS を介して (HTML と別のスタイルシートを使用して) ホバー イメージ効果を追加しようとしclass
ましたが、機能しません。
「すべての」ブラウザで機能するロールオーバー ボタンを設定するにはどうすればよいですか? (Chrome、FF、IE、Opera、Safari でテスト済み)
ノート:
明確にするために、ロールオーバー画像の作成に問題はありませんが、フォームの「送信」ボタンとして機能するロールオーバー画像を作成します(PHPスクリプトを起動します)。
私のコードはすべてのブラウザーでロールオーバーを表示しますが、FF と IE では「送信」ボタンとして機能しません。