Webmaster
Paint Shop Pro : A button that changes when the mouse moves over it
[ Contents ]
Bernard Jolivalt
Replacing Buttons When the Mouse Moves Over
We are going to use JavaScript to replace the "normal" button with the incised button. Place the following script in your Web page header (between the <HEAD> and <HEAD> tags):
<SCRIPT LANGUAGE="JavaScript">
<!--
bouton = new Image (100,60);
survol = new Image (100,60);
bouton.src = "Image1.gif";
survol.src = "Image2.gif";
//-->
</SCRIPT>
To place the button on the page, place the following instruction in the appropriate place:
<A HREF="URL.htm" onMouseOver="URL.src=survol.src" onMouseOut="URL.src=bouton.src">
<IMG SRC="Image1.gif" NAME="URL" WIDTH="100" HEIGHT="60" BORDER="0"></A>
Pay attention to replacing the values in red with the corresponding values for your page. URL.htm is the address of the page that the link points to. 100 and 60 are respectively the width and the height of the button (in pixels). Image1.gif and Image2.gif correspond respectively to the image displayed by default and to the image that is displayed when the mouse cursor moves over the button.
The Web page now contains one (or more) dynamic buttons that change appearance when the mouse cursor passes over them.
