In your navigation menu, you would like to dynamically add an “active” class to each menu item when you’re on the corresponding pages so you can style those menu items.

 

HTML:

 

Javascript:

Javascript code:

HTML:

Example:
Please click here.

What You Want To Do: you have a menu of items or a set of images that need to change when they are hovered over.

How To Do It: Use the MM Image Swap!

Put the following code between the <head> tags or a Javascript file that is called on whichever page(s) you want to swap images on.

Now, for the section that has the menu items (or images) that you want to swap, you need to call the functions. The example I’m going to give is the menu list I used, so adjust accordingly. If you didn’t use a <ul> list, then don’t copy my code exactly. Also, you’ll need to swap out the image file names, height and width, etc. to your own.

Finally, go to the <body> tag and preload the images. Again, change the image file names to your own.