This tutorial will guide you through the steps for a mouseover or interface graphic using Picture Dicer and JavaButtons. Both programs are freeware and the urls can be found on my links page.

First you need to create your off graphic and your on graphic. See the examples below:
"On Graphic"

Next, open Picture Dicer and load your "on" graphic.

Now that your graphic is loaded, you want to make your cuts. If you have small areas to cut out, you may have to cut the larger pieces and reload these pieces and cut them again to the desired size. A right click makes the horizontal cuts, and a left click makes the vertical cuts.

Okay, now you want to process the image (cut it up into pieces). Click on "File" "Process Image":

Once Picture Dicer is finished cutting up the image, it will save the pieces in whatever file or folder the original graphic was in. Picture Dicer will also generate the html code (and save it in the original file or folder) to put the pieces back together, but for this tutorial we will disregard this code. Make a note of the name assigned to the grid, i.e. "on.grd"

So, you have the pieces for the "on" graphic; now you need the pieces for the "off" graphic. As before, load the "off" graphic into Picture Dicer. Click on "File" "Load Grid". You want to use the same grid you used for the "on" graphic so all the images are exactly the same size.

Once you have loaded the grid, click "File" "Process Image" and wait while Picture Dicer cuts up this graphic. Close Picture Dicer.

Now, we want to put the pieces back together and also write the mouseover code. This is where JavaButtons comes in.

Open JavaButtons. In the upper left corner is the directory. Make sure the directory showing is the one where the graphics pieces and corresponding html documents (the links which the buttons point to) are stored.

Now, by clicking on the document listed in the directory, load the first piece of "off" graphic, the first piece of "on" graphic and the corresponding links html document. Do this for as many pieces of graphic you have.

After you have loaded all the graphic pieces and links html documents, click on the "test" button on the right side of the screen. This will load all the pieces into the browser window so you can make sure the mouseover performs as you intended. Keep in mind that the test will have a space between all the pieces. This will be corrected when you insert the mouseover code into your document.

If everything looks as it should, click on the "generate" button to write the mouseover html code. Once the code has been written, it will be displayed in another window. Copy and paste this code into your document.

Insert the "Script Language" part right after the "body" tag in your document. Insert the "mouseover" code where you want the mouseover/interface in your document. It is not necessary to put the code in a table unless you plan to have additional text next to the mouseover/interface. Generally, you will need to put the "mouseover" code on one (1) continuous line. Once you have the code where you want it, check the mouseover/interface in your browser. You may have to insert returns (<br>) in order to get the mouseover/interface to line up properly.

If you have any problems, feel free to email me.

Home ~ Portfolio ~Fees
Graphics ~ Tutorials ~ Links ~ EMail

divider bar