Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:04
Disjointed rollover image
Poster: warren
Dated: Monday October 13 2003 - 16:32:04 BST
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
Poster: Maz
Dated: Monday October 13 2003 - 16:44:01 BST
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
answer unhelpful
Poster: calebgriffin
Dated: Monday November 24 2003 - 3:09:21 GMT
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?
Poster: kevin3442
Dated: Tuesday November 25 2003 - 0:56:50 GMT
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:
<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:
function swapMenuImage(newImageFile)
{
document.images['menuImage'].src = 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:
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:
aI("text=item text;url=http://www.theurl.com;onfunction=swapMenuImage('newFileName.gif');offfunction=swapMenuImage('baseimage.gif');");
Hope that helps,
Keivn
Got another?
Poster: calebgriffin
Dated: Tuesday November 25 2003 - 1:28:20 GMT
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?