Mouseover Effects

[Casey]

Greetings,

I have an ASP .NET page that contains three images which give the
appearance of a tabbed folder. The images contain the words Product
Search, Cart, and Summary respectively.

The idea is that when the user is on the Product Search page, an image
is displayed to give the appearance that the tab is selected. The
user can mouse over the other images and with roll over effects, those
tabs appear selected as well for the user allowing them to click on
that image to go to the specified web page. My problem is this. If
the user is on the Product Search web page and then mouses over the
Cart image, (the cart image would display the mouse over effect) but
decides to not click the cart image, I need to not only set the cart
image back to the original image, but set the Product Search image
back to the mouse over image.

Here is my code. It does everything but set the images back to their
original state in the case of this mouse out scenerio explained above.

<ASP:IMAGEBUTTON
id="ProductSearch"
onmouseover="this.src='../../images/OrderEntry/ProductSearch-over.gif'"
onmouseout="this.src='../../images/OrderEntry/ProductSearch.gif'"
ImageUrl="../../Images/OrderEntry/ProductSearch.gif" runat="server">
</ASP:IMAGEBUTTON>

<ASP:IMAGEBUTTON
id="Cart"
onmouseover="this.src='../../images/OrderEntry/Cart-over.gif'"
onmouseout="this.src='../../images/OrderEntry/Cart.gif'"
ImageUrl="../../Images/OrderEntry/Cart.gif" runat="server">
</ASP:IMAGEBUTTON>

How do I reference the Product Search imagebutton when mousing out of
the cart image button?

Thanks in advance.

Casey

 

[bruce barker]

normally you do not have a mouseover behavior for the selected tab, as
clicking has no effect (you are already there). you can do two statement on
the mouseout:

<ASP:IMAGEBUTTON
id="Cart"
onmouseover="this.src='../../images/OrderEntry/Cart-over.gif'"
onmouseout="this.src='../../images/OrderEntry/Cart.gif';

document.getElementById('ProductSearch').src='../../images/OrderEntry/Produc
tSearch-over.gif'';"
ImageUrl="../../Images/OrderEntry/Cart.gif" runat="server">
</ASP:IMAGEBUTTON>

 

[Rob Locher]

Hi Bruce,

What you are trying to do requires client-side code. Put aside the
fact for now that your page is being generated programatically on the
server, and just consider your page as it is after it is rendered on
the server, in other words the way it arrives at the browser.

There are two ways to solve your problem: with scripts or with
Internet Explorer behaviors. If you use behaviors you will make
everybody else not using IE mad, which may not be your goal. Even if
you do want to use a behavior, you will first have to figure out how
to do it by using a script, and then you will enshrine your script in
the behavior.

First, if I were you I would move your mouseover event code into
functions and call the functions from your event handlers. Second,
there is a rich client-side object model called the DOM that gives you
complete freedom to manipulate just about everything on the page
inside the browser to your heart's content. You can even dynamically
add and remove things on the page. DOMs unfortunately come in more
than one flavor: there is a standard DOM endorsed by the WWW
Consortium which just about every modern browser obeys (mostly), and
Internet Explorer has its own DOM which is the standard DOM (mostly)
with extensions. (There are also other browsers which are more of a
pain to support such as older versions of IE and Netscape, the AOL
browser, the WebTV browser, etc.)

Anyway, the Internet Explorer way to do it is to just refer to the
object on the page by its id, such as "ProductSearch.src =
'something.gif';". The standard DOM way to do it requires one more
step:

var myImage = document.getElementById("ProductSearch");
ProductSearch.src = "something.gif";

MSDN has an excellent reference on the DOM, w3.org has the reference
to the standard DOM (which is a bit cryptic), and there are many, many
DHTML books out there.

- Rob

normally you do not have a mouseover behavior for the selected tab, as
clicking has no effect (you are already there). you can do two statement on
the mouseout:

-- snip --