Disjointed rollover image

[warren]

Hi

I have used the menu for a couple of my client's websites. I am trying to set one up that has disjointed rollover images so that when a user mouses over the different menu options a different image would show in a specific position. If anyone has any ideas I would really appreciate it as I couldn't find anything on the site.
Thanks in advance and thanks for a great menu

Warren

[Maz]

I'm not sure if you can use imageposition in a menu item for this or just use a different image spaced different, or use a different onbgimage, onbgimage can be tricky.

The other option is to use onclass with a style or style sheet.

That should keep you busy for a while

Regards,
maz

[calebgriffin]

I have the same problem as Warren. I want to place a mouseover event on each menu option. How do I do that?

As far as I understand, imageposition is a java attribute and doesn't apply here and I have no idea how a stylesheet can make an image change when triggered by mouseovers.

Could you be more particular in your help?

[kevin3442]

I don't know for certain if Warren and calebgriffin are talking about the same thing, so I'll reiterate the problem that Warren has, as I understad it.

Warren wants a single, specific image on the page to change as the uer mouses over the main menu item, with each menu item causing a unique ts own, unique image to appear in that one location. Correct? If that's it, then you can do it like so:

(1) Place your base image (the one that initially appears on the page) any way you like. In the img tag, name the image, like so:

Code: Select all

<img src="baseimage.gif" name="menuImage" id="menuImage">

Note that hte way the function below is written, it's important to name the image 'menuImage' and not something else.

(2) Place the following function definition at the top of your menu_data.js file:

Code: Select all

function swapMenuImage(newImageFile)
{
  document.images['menuImage'].src = newImageFile;
}

Note that this function is specific to swapping the image named 'menuImage'. If you wanted to make it more generally applicable to swapping any image then you could easily pass a second parameter: the name of the image to change.

(3) Define your main menu item as normal, adding the "onfunction" property, like so:

Code: Select all

aI("text=item text;url=http://www.theurl.com;onfunction=swapMenuImage('newFileName.gif');");

In the above example, mousing over the menu item called 'item text' would cause the image to change from baseimage.gif to newFileName.gif (you would, of course, substitute whatever the path and name of your rollover image is for 'newFileName.gif' in the example above).

The image in question would continue to display it's most recent variation until the user mouses over the next menu item. If you always wanted to revert to the baseimage.gif between mouseovers, you could add the "offfunction" property, like so:

Code: Select all

aI("text=item text;url=http://www.theurl.com;onfunction=swapMenuImage('newFileName.gif');offfunction=swapMenuImage('baseimage.gif');");

Hope that helps,

Keivn

[calebgriffin]

That only works for version 5. I have version 3. But you have precisely identified what I would like to do. Could you tell me a solution for version 3?

[John]

calebgriffin, please post your question in the v3 area so we can keep things straight. Note that v3 is no longer supported, so there may or may not be an answer.

Thanks.