- PR -

サーバー側の分岐処理で、onMouseover、onMouseoutを実装したい

1
投稿者投稿内容
ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-03-10 19:13
ASP.NET + AJAX で開発をしております。

サーバー側の処理で、サーバーコントロールにクライアントスクリプト(javascriptのマウスオーバーイベント)
を追加したいと考えております。

具体的には、

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'権限チェック
if Session("Kengen") = 1 then
ImageButton.マウスオーバー実装
ImageButton.マウスアウト実装
else
ImageButton.Enabled = false
end if

End Sub

のような処理です。


現在、クライアントサイドでは、
http://www.animegif.net/tips/javascript/onmouseover.html
を参照に、



<script language="javascript" type="text/javascript">
// <!CDATA[
function swapImage(btnObj,sURL)
{
btnObj.src =sURL;
}


// ]]>
</script>


<asp:ImageButton ID="ImageLinkButton" runat="server" ImageUrl="~/images/Link_100_30.jpg" Visible="False"
onMouseover ="swapImage(this,'../images/Link_push100_30.jpg')" onMouseout = "swapImage(this,'../images/Link_100_30.jpg')" />



このような、マウスオーバー、マウスアウトの画像入れ替え、処理を行えております。

ただ、これですと、ボタンが使用不可(可視)の場合、マウスオーバーのイベントのせいか、
マウスのポインタが使用可能リンクと同様にハンドマークに変わってしまうのです。

よって、サーバーサイド側の処理内で、サーバーサイドコントロールにクライアントスクリプト
の実装を考えております。


javascriptを関数に書くとすれば、
Public Sub SwapImage(ByVal btnObj as object,sURL As string)

Dim strScript As New System.Text.StringBuilder

'スクリプトの作成

With strScript
.Append("<script language=javascript>" & vbCrLf)
.Append(" function swapImage(btnObj,sURL);" & vbCrLf)
.Append(" function swapImage(btnObj,sURL);" & vbCrLf)
'.Append("{btnObj.src =sURL;}" & vbCrLf)
.Append("</script>" & vbCrLf)
End With

If (Not blnStartupScript) Then
pgCtrl.ClientScript.RegisterClientScriptBlock(pgCtrl.GetType(), "message", strScript.ToString)
Else
pgCtrl.ClientScript.RegisterStartupScript(pgCtrl.GetType(), "", strScript.ToString)
End If

End Sub


こんなイメージで関数に書いて、
サーバー側で
ImageButton.
onMouseover ="swapImage(this,'../images/Link_push100_30.jpg')"
の実装
ImageButton.
onMouseout = "swapImage(this,'../images/Link_100_30.jpg')"
の実装

というイメージなんですが、皆様、どう思われますか。

もしできましたら、どなたか、ご教授願えたらと思います。どうぞ、宜しくお願いいたします。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-03-10 21:48
フォーカスがあたらなくなったらイベントを外せばOKです。


適当な名前のアトリビュート設定しておいて、そいつに退避させりゃ
いいのかな。

<input type=image mouseoverold="" mouseoutold="" id="button1"
onmouseover="swapImage('xxx.jpg')" onmouseout="swapImage('zzz.jpg')" />

を、disabled にするタイミングで、

$ID("button1").setAttribute("mouseoverold", $ID("button1").onmouseover);
$ID("button1").setAttribute("mouseoutold", $ID("button1").onmouseout);

enabled になるタイミングで、
上記と逆のことやる。



[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2009-03-10 21:53 ]
ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-03-11 00:31
>ぴあちゃん様
ご回答ありがとうございます。

引用:

フォーカスがあたらなくなったらイベントを外せばOKです。



なるほど…

引用:

適当な名前のアトリビュート設定しておいて、そいつに退避させりゃ
いいのかな。

<input type=image mouseoverold="" mouseoutold="" id="button1"
onmouseover="swapImage('xxx.jpg')" onmouseout="swapImage('zzz.jpg')" />

を、disabled にするタイミングで、

$ID("button1").setAttribute("mouseoverold", $ID("button1").onmouseover);
$ID("button1").setAttribute("mouseoutold", $ID("button1").onmouseout);

enabled になるタイミングで、
上記と逆のことやる。



つまり、idが"button1" のイメージボタンのenabled属性をtrueにするタイミング
で、$ID("button1").setAttribute("$ID("button1").onmouseover", $ID("button1").mouseoverold);
$ID("button1").setAttribute("$ID("button1").onmouseover", $ID("button1").mouseoutold);

ということを行う必要があるということですかね(戻すイメージ?)。
(javascriptですよね?)



で、また、disableのタイミングで、
$ID("button1").setAttribute("mouseoverold", $ID("button1").onmouseover);
$ID("button1").setAttribute("mouseoutold", $ID("button1").onmouseout);
を行うという事ですかね。

このイベントは サーバー側の処理中に行うことはできるのでしょうか?
明日、試してみたいと思います。

ありがとうございます。




ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-03-11 02:17
>>http://www.telerik.com/help/aspnet/menu/radmenu-telerik.webcontrols.radmenu-onclientmouseover.html

>>このイベントは サーバー側の処理中に行うことはできるのでしょうか?


というか、OnClientClickがあるなら、OnClientMouseOver は無いのか?と
想像しましょうよ。

ニセイタ
常連さん
会議室デビュー日: 2009/02/27
投稿数: 24
投稿日時: 2009-03-11 10:42
>ぴあちゃん様
ご指導ありがとうございます。

引用:



>>このイベントは サーバー側の処理中に行うことはできるのでしょうか?


というか、OnClientClickがあるなら、OnClientMouseOver は無いのか?と
想像しましょうよ。




全くその通りでした。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'権限チェック
if Session("Kengen") = 1 then

'ImageButton.マウスオーバー実装
LogOutBtn.Attributes.Add("onMouseover", _
"swapImage(this,'./images/loginbtn_p100_30.jpg')")

'ImageButton.マウスアウト実装
LogOutBtn.Attributes.Add("onMouseout", _
"swapImage(this,'./images/loginbtn100_30.jpg')")

else
ImageButton.Enabled = false
'ImageButton.マウスオーバー非実装
LogOutBtn.Attributes.Add("onMouseover", _
"")

'ImageButton.マウスアウト非実装
LogOutBtn.Attributes.Add("onMouseout", _
"")


end if

End Sub

という形で、実装する事ができました。

尚、ImageButtonにマウスポインタを当てると、ハンドマークに
変わるのはASP.NET の仕様みたいなので、

CSSに
.ImageButton
{
cursor:default;
}

を追加し、イメージボタンの属性にCSSを追加することで退避して解決いたしました。

大変お世話になりました。
リンク先のAJAXのサイトも動きの参考になります。ありがとうございます。
1

スキルアップ/キャリアアップ(JOB@IT)