I'm working with HV Menu [Ger Versluis' 2000 version 5.411 24 December 2001 - updated Jan 31st, 2003 by Dynamic Drive for Opera7] and want to have an image outside the menu change on menu mouseover.
So far I've tried creating a layer (layerA) on the original html page then inserting javascript in the original html page that triggers a shows-hide behavior for the layer (layerB) I want changed. Unfortunately, the expanded menu lies over layerA, so the behavior for LayerB doesn't trigger.
See <http://www.io.com/~lolawson/kaizen/sublevel_template_satellites.html>. If you move your mouse just to the right of the open menu for "About Us" you'll see a blue circle appear just under the word Newsletter on the upper right. What I want is for that circle to appear when you mouseover the actual menu.
I've seen an example of incorporating additional JS into the menu system as follows:
Okay, I know what I need to do, but need some pointers on getting it done.
What I need is to write a function for a separate .js that includes the test for mouseover/mouseout and responds with the appropriate show/hide layer. Then, I can plug that function(var) into the menu script.
My scripting abilities aren't up for me to create this from scratch. Has anyone seen a script that will do this?
-Leslie
Jona
03-19-2003, 05:03 PM
You mean something like... <a href="aboutus.html"
onMouseOver=" MM_showHideLayers('SatellitesLayer1','','show');MM
_showHideLayers('SatellitesLayer','','hide');document.images['blueBallImageName'].src='blueBallImageOn.gif'"
onMouseOut=" MM_showHideLayers('SatellitesLayer1','','hide');MM
_showHideLayers('SatellitesLayer','','show');document.images['blueBallImageName'].src='blueBallImageOff.gif'">
Something like that?
Leslie
03-19-2003, 05:33 PM
Thanks for the reply, Jona!
So, how do I incorporate what you've added into this format (contained in the menu .js):
I can't put the <a> tag into the HTML, as the menus are defined completely in a separate .js
Thanks again for the help!
-Leslie
Jona
03-19-2003, 11:07 PM
I don't quite understand what you want. You want the Array to change the .src of the image? Can't you just edit the HTML?
Leslie
03-20-2003, 10:05 AM
The js that generates the menus isn't included in the HTML. All the HTML does is call the scripts from a separate files (namely, http://www.io.com/~lolawson/kaizen/js/sublevel_menu_var_satellites.js and http://www.io.com/~lolawson/kaizen/js/menu_com.js), so, I can't edit it in the HTML.
In one of the separate script files is the code that generates the contents of each menu line, i.e.:
Where the variables are as follows
1) menu line text or graphic ("rollover:images/sub_aboutus_off:images/sub_aboutus_on")
2) corresponding link ("aboutus.html")
3) background image ("images/sub_arrow2.gif")
4) # of sub-elements (5)
5) menu box size (19, 91)
I'm confident that what I want can be done by editing the corresponding link (variable 2), including javascript--either the full code or just calling a custom function. Problem is, I don't know the syntax for causing a mouseover here to show/hide the separate layer while linking to another page.
but it didn't work, nor does it include the link to aboutus.html
I'm thinking I need to write a separate script altogether and just call it here with the variables being the layer names. Have you seen any scripts that do this?
Thanks so much for your help and persistence, Jona!
-Leslie
Jona
03-20-2003, 12:01 PM
Well, I guess you want to only use a seperate .js file instead of just putting the .js in the HTML, eh? Ok...
Jona, you're awesome for sticking with me on this one. I see we're still not on the same page, though. I'll try to be more eloquent.
The menu system I'm using (HV Menu) is set up with the js in a separate file. I really don't want to change that, as the same menu is going to be used on some 20+ pages.
The existing rollovers work fine, and I'm clear on how to change them. That's not the problem I'm having. What I want is to have that same mouseover trigger a show/hide behavior in a *different* layer (that I've ID'd in the HTML as SatelliteLayer1). The goal is to have a mouseover of the aboutus.gif also trigger a change in the graphic just below the word "Newsletter" on the upper right hand side of the page.
Thanks again for your persistence, patience, and generosity with your time!
-Leslie
Jona
03-20-2003, 01:40 PM
The goal is to have a mouseover of the aboutus.gif also trigger a change in the graphic just below the word "Newsletter" on the upper right hand side of the page.
Now I'm dumbfounded. You mean you want to put a mouseover on the aboutus.gif that changes a different image on the page? If so, then why do you need to even edit the .js file?
Leslie
03-20-2003, 01:56 PM
Now I'm dumbfounded...why do you need to even edit the .js file?
I'm dumbfounded, too. ;)
The code that inserts the aboutus_on / aboutus_off gifs and triggers the rollover is contained only in one of the menu js's--not in the html. That's the problem.
I've identified the place in the menu js where I need to add the javascript that triggers the show hide behavior (see an earlier message), I just don't know the syntax to make it work!
Grab the scripts and my html source and give them a look. It will all become crystal clear. Really.