How to make control visible/invisible on mouseover.

[Selden McCabe]

I have a form with a bunch of image buttons. When the user moves the mouse
over a button, I want to do two things: 1. change the Imagebutton's picture,
and 2. make another control visible.

I'm using the Imagebutton.Attributes.Add("onMouseOver","this.src =
'somepicture.jpg')
and that works fine.

I've tried some java script to change the other control's visible property
by changing is className, but that doesn't seem to work

script = "document.GetElementByID('panel1').className = 'vs1';return false;"
iBut.Attributes.Add("onMouseOver", script)

but that gives me a script error on the page when I mouseover the image
button. (I've tried it with and without the return false)

So how do I change the visibility property of a control in javascript, and
then, how do I combine two steps into one onMouseOver?

Thanks!
---Selden <--- java newbie!

 

[Karl Seguin]

Just not that the ASP.net generates client-side ids that don't necessarily
match the id of the control. For example, if you could have two user
controls on the same page both containing a textbox named "username".
ASP.Net can't output two <input type="text" tags with the same id (ie,
"username"). Hence it must dynamically generate an id (the name of the
textbox appended to the user control). This might be what's happening.

Or it could simply be that it's getElementById instead of GetElementByID

Try

script = "document.getElementById('" & panel1.ClientId & "').className =
'vs1'; ....."

Karl

 

[Selden McCabe]

Hi Karl,

Thanks for the feedback and suggestions.
I tried that script too, but just got a script error when I rolled the mouse
over the button.

I haven't gotten any other suggestions. I wonder if it's possible to write
the routine I want in VB script instead of java? Is it any easier to access
controls on your web page with VB script?

Thanks,
---Selden

 

[Karl Seguin]

Not really. Perhaps if you showed us what you have thus far?

Karl

 

[Selden McCabe]

Thanks, good suggestion!

Here's what I've tried, what worked and what didn't:

First, there is a panel on the page, "Panel1" if I set it's CssClass to
"vs1" it is visible. If I set it to "vs2" it is invisible. I've confirmed
this several times.

this worked:
sPic3 = "family/purchase/images/portrait_navs/" & sTitle &
"3.gif"
iBut.Attributes.Add("onMouseOver", "this.src='" & sPic3 & "'")

This gave me a script error: (tried with and without the return false):
script = "document.GetElementByID('panel1').className =
'vs1';return false;"
iBut.Attributes.Add("onMouseOver", script)

This also gave me a script error:
script = "document.getElementById('" & Panel1.ClientID &
"').className = 'vs1'; "
iBut.Attributes.Add("onMouseOver", script)

As an aside, setting the panel visible/invisible is a fall back. What I
would REALLY want to do is set the text of a label to any one of 15
different values, depending on what button the mouse is rolling over. Also
I would want to set the image for an image control at the same time. But if
I can't do that, then I thought I would pre-set up 15 different panels with
the values already filled in, and just make one visible at the rollover.

---Selden

 

[Selden McCabe]

I also found another project where something like this is working, so I
copied that script but it wasn't working for me.

Here's what I found, in the aspx page of the other project

onclick='document.forms[0].btnTest.click();'

It looks like this was clicking a button, on the click event of another
control.

So I tried this: (image button ibPkgB is an image button, that, when you
click it, does what I want to happen on a mouse over...)

iBut.Attributes.Add("onMouseOver", "document.forms[0].ibPkgB.click();")

Gave me an error, so I tried:
iBut.Attributes.Add("onMouseOver", "document.ibPkgB.click();")

I checked, and ibPkgB's "ID" and "ClientID" properties are both "ibPkgB" so
it didn't seem worthwhile adding that to the script.

So that's all I've tried so far...

---Selden