formの送信ボタン

[新着] Webテンプレートを仮オープンしました

0   名前： タナ ： 2005/08/02 17:43
formの送信ボタンを画像で表示した場合、
ロールオーバー効果は使えないのでしょうか？
aタグがないのでどうすればいいのか判らないのですが…。
1   名前： Hawkeye @ C-- ： 2005/08/02 17:43  ［URL］
JavaScriptを使えばできます。検索サイトなどで調べてみてはいかがですか?
[ボタン ロールオーバー JavaScript]
2   名前： タナ ： 2005/08/02 17:43
フォームの送信ボタンをロールオーバーにする方法なのですが。
一般的なロールオーバーの方法は判ります。
3   名前： t ： 2005/08/02 17:43
「一般的なロールオーバーの方法」がどんな方法だか分かりませんが、
（結構いろいろな手法があるので）
それをボタンに指定している画像部分の記述に応用すればよいのでは。
別にアンカータグじゃなくてもマウス系のイベントハンドラは使えますよ。
4   名前： RippleGreen ： 2005/08/02 17:43
JavaScriptを使用しても良いのであれば、このような方法は如何でしょうか。

<input type="image" src="btn_off.gif" alt="" border="0" height="65" width="70" onmouseover="this.src='btn_act.gif'" onmouseout="this.src='btn_off.gif'">

------------------------------------------------------------
※btn_off.gif、btn_act.gif、サイズ等は適宜変更して下さい。
　上記JavaScriptに対応していないブラウザ、JavaScriptをOFFに
　している環境では、切り替わりません。
------------------------------------------------------------
動作確認
OS：WindowsXP professional sp2
Browser：IE 6.0 SP2、Netscape7.2、Firefox 1.0.4
5   名前： タナ ： 2005/08/02 17:43
RippleGreen様の方法で試してみましたが、ロールオーバーに
なりませんでした…。間違いとかありましたでしょうか？

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<body onLoad="MM_preloadImages('画像１')">

<input type="image" src="画像１" alt="送信する" border="0" width="142" height="22" onmouseover="画像２'" onmouseout="画像１'">

こんな感じだと思ったのですが…。

Aタグの一般的な？(というか、私が今まで使ってたやり方)
方法の方はちゃんと動きます。
6   名前： RippleGreen ： 2005/08/02 17:43
onmouseover、onmouseoutの中の記述はJavaScriptです。
画像ファイル名だけを指定しても切り替わりませんので、画像を切り替えるスクリプト等を記述して下さい。

this.srcとは、<imput type="image" src="…">で指定している画像のソースのことで、それをマウスが重なった時、離れた時で切り替えています。
一先ず、下記の一文をコピーして、画像１、画像２の部分のみを変更して試してみて下さい。

<input type="image" src="画像１" alt="送信する" border="0" width="142" height="22" onmouseover="this.src='画像２'" onmouseout="this.src='画像１'">

Aタグの一般的な（？）方法とは、擬似クラス（hover）を使用する方法のことでしょうか？
これはアンカー要素（A）にしか利用できないので、前述のようなスクリプトをご提示しました。
7   名前： タナ ： 2005/08/02 17:43
できました！ありがとうございました!!
JavaScriptは全然無知なもので、参考になりました。

ちなみに、私が勝手に一般的だと思っているロールオーバーは、
HP作成ソフトが自働で作ってくれる下のタイプです。
<a href="#.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image77','','画像2',1)"><img src="画像1" name="Image77" width="232" height="22" border="0"></a>
ロールオーバーの種類？って色々あるのでしょうか？
8   名前： RippleGreen ： 2005/08/02 17:43
ＨＰ作成ソフト（dreamweaverでしょうか？）が作っているのも、JavaScriptです。
それを応用されるのでしたら、
<input type="image" src="画像１" name="Image77" alt="送信する" border="0" width="142" height="22" onmouseover="MM_swapImage('Image77','','画像2',1)" onmouseout="MM_swapImgRestore()">
のように記述されると動作するのではないでしょうか。

>ロールオーバーの種類？って色々あるのでしょうか？
色々あると思います。
Hawkeye @ C--さんが書かれていらっしゃるキーワードで検索をしてみては如何でしょう？

また、場合によっては、JavaScriptを使用せずに実現することも可能かと思います。
簡単ですが、スタイルシートで同じような効果を試してみました。（注：Netscape4.xでは効果は発動しません）
http://ripple.mints.ne.jp/sample.html
9   名前： タナ ： 2005/08/02 17:43
CSSでロールオーバー！凄いです！
とても参考になりました。
ありがとうございますっ。
一覧へ戻る