To change the appearance of a graphic when the mouse "rolls over" it, first create both versions of the graphic in your preferred graphics program. These images must be the same size for good results. Then, use Javascript to preload the rollover version of the image and implement the rollover behavior. Make sure that the "default" graphic still displays enough information to make the page useful to those who have Javascript turned off.
Here is an example of the necessary HTML:

<script>
new Image().src="mybutton2.gif"
</script>
<img
name="mybutton"
id="mybutton"
src="mybutton1.gif"
onMouseOver="document.images['mybutton'].src='mybutton2.gif'"
onMouseOut="document.images['mybutton'].src='mybutton1.gif'"
>

With this code, mybutton1.gif is displayed until the mouse enters the image. Then mybutton2.gif appears until the mouse moves out again. The new Image().src=... code makes sure that the browser starts loading the rollover image at the time the page is loaded so that it is already available when the mouse does move over the image. Otherwise, the rollover image would not start loading until the mouse actually entered it.