# Solved: Multiple 'OnMouseOver' Actions



## TW.87 (Dec 30, 2005)

G'day,

I am stuck with a navigation system that I am working on at the moment.

I have a image-based link that swaps to a different image when the mouse hovers over it, and, at the same time, when the mouse hovers over it, it is meant to display a menu.

So, this would need to have multiple 'OnMouseOver' actions.

I currently have this:


```
[TD][URL=#][IMG alt="Main"]../Global(Images)/Global(Image0004).png[/IMG][/URL][/TD]
```
...Which does not work.

I did a search online and found something that said that seperating each action with a semicolin would achieve the desired result, but it appears that that is not the case.

As you can see above, the two 'OnMouseOver' actions I want to activate when the mouse hovers over the image-based link are:


```
document.Main.src='../Global(Images)/Global(Image0004).png'
```
...and...

```
GlobalNavigationInactive()
```
If anyone can assist me with this with the simplest fix available, I would greatly appreciate it!


----------



## MMJ (Oct 15, 2006)

Hmm... That should work. Do you have a link?

You can try this:

```
<a href="#" onmouseout="document.Main.src='../Global(Images)/Global(Image0004).png'; GlobalNavigationInactive()" id="a1">
```
what is *event*?


----------



## TW.87 (Dec 30, 2005)

Thanks for the reply.

You can see what's happening here: http://2008.rickkelly.com.au/[Global]/Global(Assets)/Global(Heading).php. We're dealing with, in particular, the "Main" button that you will see there.

As for what _event_ refers to, it is something within the JavaScript for the drop-down menu.

I'll try what you suggested with your code and let you know.


----------



## TW.87 (Dec 30, 2005)

I've tried working it with your code, but I haven't had much luck. It's probably my own ignorance causing the problem, though. Any more help you could be would be greatly appreciated!


----------



## Fyzbo (Feb 6, 2002)

Based on MMJ suggestion I added this code the bottom of your page:

```

```
Both items were being called, however the GlobalNavigationActive was throwing errors. Might be that it looks like the javascript is not executing, but in fact the function just has errors.


----------



## MMJ (Oct 15, 2006)

I see 2 functions in onmouseout but I don't see onmouseover.


----------



## TW.87 (Dec 30, 2005)

Thanks very much for the help...but I'm a little lost on what I should do now?

My apologies for not catching on quicker.


----------



## MMJ (Oct 15, 2006)

There is no onmouseover attribute for the Main button.


----------



## TW.87 (Dec 30, 2005)

In what, though, sorry? The code I have included in my first post has both the 'onmouseover' and 'onmouseout' actions?


----------



## MMJ (Oct 15, 2006)

TW.87 said:


> In what, though, sorry? The code I have included in my first post has both the 'onmouseover' and 'onmouseout' actions?


I'm talking about the link you provided.

This is the code for the Main button:


```
[URL=#][IMG alt="Main"]../Global(Images)/Global(Image0004).png[/IMG][/URL]
```


----------



## TW.87 (Dec 30, 2005)

My apologies - I must have accidentally done that when I was fiddling with it before.

I'll make that change and then see where it's at.

Thank you for your patience, too.


----------



## TW.87 (Dec 30, 2005)

Fyzbo said:


> Both items were being called, however the GlobalNavigationActive was throwing errors. Might be that it looks like the javascript is not executing, but in fact the function just has errors.


This might be the problem then.

I am getting the error "'undefined' is null or not an object" on line 178 (although the PHP doesn't go down that far, so I assume it's talking about the JavaScript). But, I can't work out what the error is.

Can anyone assist with that?


----------



## tomdkat (May 6, 2006)

Ok, I'm running Firefox 3.0 beta 3 and I loaded your site. I displayed the Error Console so I could see JavaScript errors. When I loaded your site, I saw a CSS error get logged:

Warning: Error in parsing value for property 'background-image'. Declaration dropped.
Source File: http://2008.rickkelly.com.au/[Global]/Global(Assets)/Global(StyleSheet).css
Line: 8

Then when I moved the mouse over "Main", I got this error:

Error: e is undefined
Source File: http://2008.rickkelly.com.au/[Global]/Global(Assets)/Global(Navigation).js
Line: 187

I clicked that error and got this:


```
function GlobalNavigationActive(obj, e, menucontents, menuwidth)

	{

	if (window.event) event.cancelBubble=true

	[b]else if (e.stopPropagation) e.stopPropagation()[/b]

	clearhidemenu()

	dropmenuobj=document.getElementById? document.getElementById("GlobalNavigation") : GlobalNavigation

	populatemenu(menucontents)

	if (ie4||ns6)
```
The line in bold above was highlighted.

Now, if you look at the function definition:

function GlobalNavigationActive(obj, e, menucontents, menuwidth)

you will see GlobalNavigationActive() can accept 4 arguments. If you look at the JavaScript call to that function in the onmouseover event for the "Main" image:


```
<a href="#" onmouseout="document.Main.src='../Global(Images)/Global(Image0004).png'; GlobalNavigationInactive()" onmouseover="document.Main.src='../Global(Images)/Global(Image0011).png'; [b]GlobalNavigationActive()[/b]" style="cursor:default;">
```
you will see NO arguments are being passed. Since the line in the function references a variable that wasn't passed in, a JavaScript exception/error is generated and the function doesn't run.

So, you should find out which arguments you need to pass to GlobalNavigation() to have it function properly at the time the user hovers the mouse over "Main".

Peace...


----------



## TW.87 (Dec 30, 2005)

Thank you for your response - I really appreciate the effort you've gone to.

I have corrected the arguments that are meant to be passed, so it now looks like this:

```
onmouseover="GlobalNavigationActive(this,event,News,'100px'); document.Main.src='../Global(Images)/Global(Image0011).png'"
```
However, I am still getting an error that says "Object doesn't support this property or method".

If you could help me work it out from here, I would really appreciate it.


----------



## tomdkat (May 6, 2006)

TW.87 said:


> Thank you for your response - I really appreciate the effort you've gone to.
> 
> I have corrected the arguments that are meant to be passed, so it now looks like this:
> 
> ...


You sure about that? 

This is what I'm seeing right now:

```
<a class="GlobalNavigationLink0001" href="#" onclick="return NavigationSystem()" onmouseout="document.Main.src='../Global(Images)/Global(Image0004).png'; GlobalNavigationInactive()" [b]onmouseover="document.Main.src='../Global(Images)/Global(Image0011).png' GlobalNavigationActive(this,event,Main,'100px')[/b]" style="cursor:default;">
```



> However, I am still getting an error that says "Object doesn't support this property or method".


Now, I'm on Firefox 2.0.0.12 on Linux and the Error console says this:

Error: missing ; before statement
Source File: http://2008.rickkelly.com.au/[Global]/Global(Assets)/Global(Heading).php
Line: 1, Column: 60
Source Code:
document.Main.src='../Global(Images)/Global(Image0011).png' GlobalNavigationActive(this,event,Main,'100px')

Looks like you're missing a semi-colon after the closing quote after ".png".

You should install Firefox, if you haven't done so already, and test your page there so you can use its Error Console to help you debug your JavaScript. Or, see if you can get more error info from whatever browser you're testing in.

Correct that semi-colon problem and we can proceed.

Peace...


----------



## TW.87 (Dec 30, 2005)

Okay, I've corrected the semi-colon. My apologies about that.

I will do what you said with Firefox - quite often, though, I'm just not educated enough about JavaScript to know what to do when there is a problem. That's something I'm working on, though.

Your continued help with this problem would be appreciated.


----------



## tomdkat (May 6, 2006)

Ok, here is the latest JavaScript error as reported by Firefox:

Error: what.join is not a function
Source File: http://2008.rickkelly.com.au/[Global]/Global(Assets)/Global(Navigation).js
Line: 177

Here is the line identified:

```
function populatemenu(what)

	{

	if (ie4||ns6)

	[b]dropmenuobj.innerHTML=what.join("")[/b]

	}
```
It looks like populatemenu() is called from GlobalNavigationActive(). You're passing in "Main" as the "menucontents" object:


```
<a class="GlobalNavigationLink0001" href="#" onclick="return NavigationSystem()" onmouseout="document.Main.src='../Global(Images)/Global(Image0004).png'; GlobalNavigationInactive()" onmouseover="document.Main.src='../Global(Images)/Global(Image0011).png'; [b]GlobalNavigationActive(this,event,Main,'100px')[/b]" style="cursor:default;">
```
"Main" is an image and won't have a "join()" method that can be invoked. That is causing the current error I'm seeing. So, you're going to have to determine what is the correct object to pass in instead of "Main".

At this point, I would suggest reading the documentation on the JavaScript menu you're using to find out how to use it. If you could post a link to where you found it, that might help us locate documentation on how to use it. 

Peace...


----------



## TW.87 (Dec 30, 2005)

You said something then that made me realise what the problem was!

"Main" is tagged as the name of the image for the image-swap effect, and it is also the name of a reference within the navigation script - so the script would be confusing itself. I just changed one of the references to "Main2" and now it works!

Thank you so, so much for all of your help with this!

I do have one new problem, though, ha ha, although I think this one should be easier. The menu, when it displays, is displaying underneath the Flash animation, and not over it. How do I correct that?


----------



## tomdkat (May 6, 2006)

TW.87 said:


> "Main" is tagged as the name of the image for the image-swap effect, and it is also the name of a reference within the navigation script - so the script would be confusing itself. I just changed one of the references to "Main2" and now it works!


Great! However, this is NOT good enough.  Now that you've identified the name conflict, I HIGHLY insist (not recommend or suggest but INSIST) that you rename the image to "Main-image" or assign some other name and id to the image which clearly identifies that it's the image. This does two things:
Clearly identifies the image element as being an image by name or id such that when the script is looked at a year from now and possibly by someone else, they won't have the same problems you did this time around. "Main2" is just to vague of a name for an element.
Makes sure there won't be any name conflicts between objects the script needs to use and elements on the HTML page itself. Good naming conventions are definitely a part of good programming practice and the work we've been doing is debugging some JavaScript,which is part of JavaScript programming. 



> I do have one new problem, though, ha ha, although I think this one should be easier. The menu, when it displays, is displaying underneath the Flash animation, and not over it. How do I correct that?


Sheesh, you give an inch.... 

You can try putting the menu table in a DIV that has absolute positioning and a z-index of 5 or 10 or something to make sure it appears over anything else below it on the page when the menu is expanded. I'm sure others will have other ideas or suggestions.

Peace...


----------



## MMJ (Oct 15, 2006)

I missed all the action.


----------



## tomdkat (May 6, 2006)

MMJ said:


> I missed all the action.


There's still some action left for you.  You can help with the "menu appears UNDER Flash object (please help me Obi-Wan-MMJ)" problem. 

Peace...


----------



## MMJ (Oct 15, 2006)

tomdkat said:


> There's still some action left for you.  You can help with the "menu appears UNDER Flash object (please help me Obi-Wan-MMJ)" problem.
> 
> Peace...


heh, good one.


----------



## TW.87 (Dec 30, 2005)

tomdkat said:


> Great! However, this is NOT good enough.  Now that you've identified the name conflict, I HIGHLY insist (not recommend or suggest but INSIST) that you rename the image to "Main-image" or assign some other name and id to the image which clearly identifies that it's the image. This does two things:
> Clearly identifies the image element as being an image by name or id such that when the script is looked at a year from now and possibly by someone else, they won't have the same problems you did this time around. "Main2" is just to vague of a name for an element.
> Makes sure there won't be any name conflicts between objects the script needs to use and elements on the HTML page itself. Good naming conventions are definitely a part of good programming practice and the work we've been doing is debugging some JavaScript,which is part of JavaScript programming.
> 
> ...


"Main2" was just a reference I had used at the time to work out whether or not that was the problem. I have since renamed the reference as "MainLink", which makes sense to me when I'm working on the website.

I'll try what you suggested for the animation, too - thank you! I'll let you know how it goes.


----------



## tomdkat (May 6, 2006)

TW.87 said:


> "Main2" was just a reference I had used at the time to work out whether or not that was the problem. I have since renamed the reference as "MainLink", which makes sense to me when I'm working on the website.


Ok, fair enough. 

Peace...


----------



## TW.87 (Dec 30, 2005)

Thank you again for all of your help - I really appreciate it.


----------



## tomdkat (May 6, 2006)

You're very welcome. 

Peace...


----------

