CRITICAL - here is a Constantly recurring Problem with these type of rollovers - but there is a simple fix !!! The Index numbers refer to a count that the browser keeps of images. It moves from top to bottom. So, if you have any standard, non-rollover images that appear "before" your rollover, then you must count them, and increment the index number by 1 for each image - regardless of whether it is a rollover image or not !!
Here are 2 pages - one done with the "problem" and one done correctly:
1) Problem Page - this page has an image that appears before the rollovers. But we did not increment the index number for the first rollover, leaving it at "0". Note that when you move the mouse over the rollover, it jumps up into the space where the previous image is !!
1) Correctly Done Page - this page also has an image that appears before the rollovers. But for this page, we did increment the index number for the first rollover, changing it to "1". The way the browser counts these, is that it indexes the static, non-rollover image as image "0", and the next image, the rollover, as image "1". Note that when you move the mouse over the rollover, it works properly !!
Always code your rollovers as follows: