Combining Functions on a Page

**charrell** · 01-03-2006, 08:26 PM

Hi,

I'm designing a webpage that sells Halloween products. I'm using a couple of javascript functions to add some interactivity to the page, but I've run into a problem. Now, I'd like to have two things happen when the user mouses over that little window over the door:

1. the window opens to reveal an icon, like this:
http://catherineharrell.com/holidays...imageswap.html

2. and at the same time, a name appears below the haunted house, like this:
http://catherineharrell.com/holidays...en/hilite.html

These two functions work independently...but put them together, and only one will work.

The two pages I showed you are identical, except that on that first page, the body onload function looks like this:
body onload="initMaps('menubarMap');hiLite(imgName,imgObjName)">, so only the initMaps function works (the bag icon appears).

And on the second page, the order is reversed:
<body onload="hiLite(imgName,imgObjName);initMaps('menubarMap')"> so only the hiLite function works (the name appears).

I'm kind of a beginner with this sort of thing, so I suspect there's a conflict in the code but I don't know exactly how to go about solving it. Any help would be appreciated. Thanks for checking it out.

-Catherine

**Twey** · 01-03-2006, 09:11 PM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

**jscheuer1** · 01-04-2006, 06:04 AM

You are mixing apples and oranges. The function named initMaps is appropriate to run onload. It initializes or (if already written in the HTML portion) rewrites the (onmouseover and other) events of the elements it targets. The function hiLite is appropriate to be used for whatever individual (onmouseover/onmouseout) events you like. But, if it is run onload, it initializes nothing. Things are complicated the way you have them. If you write the onload event in the body tag like so:

Code:

onload="initMaps('menubarMap');hiLite(imgName,imgObjName);"

Then the events configured in the initMaps function are initialized and since:

imgName and imgObjName

are undefined, hiLite does nothing onload. However, you had also made use of hiLite for onmouseover/onmouseout event for one of the elements that initMaps just overwrote the events for, so hiLite is replaced by whatever initMaps is configured to replace it with.

Now if you write the body onload event like so:

Code:

onload="hiLite(imgName,imgObjName);initMaps('menubarMap');"

Since:

imgName and imgObjName

are undefined, hiLite still does nothing onload but, since it comes before initMaps, the script parser never gets to initMaps, having halted with an error on:

imgName is undefined

As a result, your use of hiLite in the HTML portion of the page is not overwritten by initMaps (which hasn't run) and therefore hiLite works. Since initMaps didn't run, none of its events got initialized, so none of them will work.

As I said, apples and oranges. You need to combine the two events that you want associated with (that) area tag element(s) into one or the other type of event assignment. Either hard code both events into the HTML portion of the tag or have them both assigned by one initializing function.

It is possible to add to existing events but, that is more complicated than is warranted here.

Since initMaps uses an already perfectly fine image swapping function, imgSwap, it can be combined with hiLite. First get rid of the body onload event (make your body tag like so):

HTML Code:

<body bgcolor="#627AB3" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

Then for the area tag in question, combine the two events like so:

HTML Code:

<area shape="rect" coords="413,213,460,260" href="halloween-party-ideas.html" onMouseOver="imgSwap(event);hiLite('labelspot','partyideas')" onMouseOut="imgSwap(event);hiLite('labelspot','labelspot')" />

**Twey** · 01-04-2006, 05:22 PM

Originally Posted by myself

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

Argh, drat... I just noticed the forum this was posted in. Ignore me.

Thread: Combining Functions on a Page

Thread Tools

Search Thread

Combining Functions on a Page

Bookmarks

Bookmarks

Posting Permissions