guide here: http://joemaller.com/js-singleroll.shtml
And for different areas, if they trigger the change on the area you are on, just splice your image into the areas and then each one is its own rollover image.
Depending on the size of the image, you may want to pre-load the image(s) or you can use CSS to load one large image and just move the background image as seen here: http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml
What is the HTML script for a rollover image? For example: one image would be displayed, and then the user would move their cursor over the image and it would change to a different one. Also, if possible, is there a way to use different areas of an image as the trigger for a rollover effect?