- PR -

[ASP.NET]SPREADにおけるImageButton押下時の画像変更

投稿者

投稿内容

新人S: ベテラン; 会議室デビュー日: 2005/10/12; 投稿数: 74

投稿日時: 2005-10-12 16:42

皆様はじめましてm(_ _)m
現在、ASP.NET(言語はVB)で開発をしています。
「SPREAD for .NET」を使って表を表示させようと思っています。
SPREADの「ImageButton」を使ったときに、自分で用意したボタン用の画像を
設定できますよね？
そこで質問なのですが、
そのボタンを押したときにボタンの画像を変更したい(ボタンが押された～ってかんじの画像)のですが、可能でしょうか？
とても基礎的なことを聞いていると思うのですが、どうぞ皆様よろしくお願い致します(>_<)

Jitta: ぬし; 会議室デビュー日: 2002/07/05; 投稿数: 6267; お住まい・勤務地: 兵庫県・海手

投稿日時: 2005-10-12 21:24

基礎的どころか、場合によってはかなり高度なことだと思いますよ。

SPREAD は、インストールしていますが、担当外なのでわかりません。

で、『ボタンが押された～ってかんじの画像』なのですが、、、
その画像を、どういうときに表示したいですか。Windows XP で、Luna が有効になっていれば、次のようなタイミングで“画像”が切り替わります。

１．ボタンがフォーカスを受けたとき
２．ボタンが押し下げられているとき
３．ボタンが押し下げられた後、離されたとき（Click イベント駆動）

で、２の状態からフォーカスを外すと、イベントは発生せずにボタンがあがっており、フォーカスがない状態になります。

もし、ASP.NET で、イベント駆動中のみ画像を変えたいということであれば、「お待ちください画面」の応用になります。
_____________________________________________________________________________
□ Posted by Jitta on 2005/10/12
□ じったのノート
□ Microsoft MVP :Visual Developer ASP/ASP.NET Oct.2005-Sept.2006
_________________

新人S: ベテラン; 会議室デビュー日: 2005/10/12; 投稿数: 74

投稿日時: 2005-10-13 00:13

返答ありがとうございます！(>_<)

＞基礎的どころか、場合によってはかなり高度なことだと思いますよ。

あれからいろいろ試してみたのですが、予想以上に難しいことがわかりました

＞１．ボタンがフォーカスを受けたとき
＞２．ボタンが押し下げられているとき
＞３．ボタンが押し下げられた後、離されたとき（Click イベント駆動）

パターンとしては、２か３になると思います。
ButtonをImageButtonではなく、普通のSPREADで用意されているボタンを使用した場合、クリックした際にへこんだカンジになって「ボタンを押している」という雰囲気が
味わえます。
私も、あのような動きにしたいのです＾＾；

そこで、試しにスプレッドン内のボタンをクリックしたときのイベントを拾い、
無理矢理セルのプロパティ（ImageUrl）を変更しようとしたのですがそのプロパティが
コード上のどこで設定されているのかも分からず…

JavaScriptなら押されたときに画像を変えることはできるのかな？などという手も
考えたりしてます。
（ただ、スプレッドでJavaScriptが使えるかどうかは不明ですが(ｰｰ;）

普通は画像でそんなことしないのですかね＾＾；

えんぞ@？: ぬし; 会議室デビュー日: 2004/07/06; 投稿数: 271; お住まい・勤務地: はまっこ

投稿日時: 2005-10-13 09:51

引用:
新人Sさんの書き込み (2005-10-13 00:13) より: JavaScriptなら押されたときに画像を変えることはできるのかな？などという手も

ImageButtonを継承したクラスを作成すれば可能なのかもしれません。

引用:
グレープシティ社　製品FAQ http://www.grapecity.com/japan/Support/product_faq_search.asp FAQ ID：7045 「【セル型】ボタン型セルをクライアント側で処理したい」

新人S: ベテラン; 会議室デビュー日: 2005/10/12; 投稿数: 74

投稿日時: 2005-10-13 20:38

返信ありがとうございます！

＞ImageButtonを継承したクラスを作成すれば可能なのかもしれません。

私の頭ではもう少しソースをゆっくり見てみないと理解できないので、
まだ試してはいませんがチャレンジしてみたいと思います。

ちなみに、すこし自分でもやってみたのですが
ボタンクリックイベントを拾って下のように書くとクリックしたときに画像は入れ替わってくれました。かなり無理やりですが…。
ここでは動的な設定ではなく(3,0)のボタンを変更ってことにしてます。

-----------------------------------------------------------------
Dim btn_CellType As FarPoint.Web.Spread.ButtonCellType = CType(e.SheetView.Cells(3, 0).CellType, FarPoint.Web.Spread.ButtonCellType)

btn_CellType.ImageUrl = "c:\\変更後の画像.gif"
-----------------------------------------------------------------

こうすると、ボタンを押してそのまま画像は変わりっぱなしです。
惜しいようで惜しくないような(-_-;

とりあえず、教えていただいた方法でがんばりたいと思います。
ありがとうございますm(_ _)m

Jitta: ぬし; 会議室デビュー日: 2002/07/05; 投稿数: 6267; お住まい・勤務地: 兵庫県・海手

投稿日時: 2005-10-14 22:06

引用:

新人Sさんの書き込み（2005-10-13 00:13）より：

＞１．ボタンがフォーカスを受けたとき
＞２．ボタンが押し下げられているとき
＞３．ボタンが押し下げられた後、離されたとき（Click イベント駆動）

パターンとしては、２か３になると思います。
ButtonをImageButtonではなく、普通のSPREADで用意されているボタンを使用した場合、クリックした際にへこんだカンジになって「ボタンを押している」という雰囲気が味わえます。

　結論から言うと、VB.NET ではなく、JavaScript で何とかします。とりあえず、次のようなコードで、何とかなりはします。ただし、onmouse* イベントが、IE 限定だったように思います。

コード:

<input type="image" id="btn1"
	src="imageResource/DataContainer_MoveNextHS.png" 最初に表示しておくイメージ
	onmousedown="changeImage(0, this);"   押されている状態にする
	onmouseout="changeImage(1, this);"    押されたままマウスが移動したときに戻す
	onmouseup="changeImage(1, this);" />  ボタンが離されたときに戻す
↑確認のために、HTML コントロール を使ったので

<script type="text/javascript">
	// ０が押されている状態の画像
	// １が普通の時の画像
	var imageFile = new Array(
		"./imageResource/DataContainer_MoveLastHS.png"
		, "./imageResource/DataContainer_MoveNextHS.png");


	// 実際に変更する処理
	// index … imageFile 配列に対するインデックス
	// target … 変更するオブジェクト
	function changeImage(index, target) {
		target.src = imageFile[index];
	}
</script>

※このコードは、Google で「javascript イメージ動的変える」を検索し、６番目の結果として出てきた「イメージチェンジャー(1) - DHTML」と、「とほほのＷＷＷ入門」を参考にしました。

　あとは、アレンジしてください。

アレンジのポイント：
　サーバコントロールである ImageButton に、onmouse* というイベントは定義されていませんから、サーバコードにてアトリビュートを追加します。
　現状では、最初にボタンを押したときにイメージをロードします。このため、最初に限り、押してからしばらく「×」がでます。イメージを先読みしてキャッシュしておくことで、回避できます。
　ボタン上にフォーカスがある状態で、スペースキーを入力しても、ボタンを押したことになります。このことには対応できていません。
___________________________________________________________________
□ written by Jitta on 2005/10/13
□ Microsoft MVP :Visual Developer ASP/ASP.NET Oct.2004-Sept.2006
_________________

ひら: ぬし; 会議室デビュー日: 2005/03/04; 投稿数: 260

投稿日時: 2005-10-15 00:08

引用:
Jittaさんの書き込み (2005-10-14 22:06) より: ただし、onmouse* イベントが、IE 限定だったように思います。

どのブラウザでも共通ですよー。さっきFirefoxで試したところ、うまくいきました。

＠IT SpecialPR

[ASP.NET]SPREADにおけるImageButton押下時の画像変更

スキルアップ／キャリアアップ（JOB@IT）