To understand buttons and Navigation bars, you need to know something about Image states.
An IMAGE STATE in a button or interactive spot corresponds with a MOUSE EVENT and are used to graphically represent interactivity.

Understanding and using Mouse Events to inclue different artwork allow you to place extra-information outside the main look of an Interface.
Those are extra opportunities to hold information.

The most common Mouse Events used to hold information are:

UP This image appears when the page first loads. It's the default image, in that it's what is displayed unless the user is interacting with this image.

ROLL OVER, MOUSE OVER or HOVER: A new image or artwork (also animation) appears when the user moves the mouse over the image.

DOWN, MOUSE DOWN or CLICK This image appears when the user is clicksing on the image amd holding down the mouse.
Down state content is regularly used in navigation bars to indicate the URL of the page we are linking to.

ROLL OUT or MOUSE OUT. The artwork that appears when the user moves the mouse over an image after clickin or after rolling over (without cliking)

W3C has added the relatedTarget property to mouseover and mouseout events. This contains the element the mouse came from in case of mouseover, or the element it goes to in case of mouseout.