---

---

How do I make a basic graphical button with a rollover version?

---

A graphical rollover button requires a layer for the what the button looks like most of the time and a layer for what it looks like when the mouse is rolled over it. SiteGrinder figures this out by looking for layers that have the same name with the "-rollover" and "-button" hints added to the ends, for example "home-button" and "home-rollover".

Here is how it's done starting with a new empty document in Photoshop.

1. Create a new graphic layer and name it "sample-button" 2. Create a sensibly button-sized rectangular selection in this layer and fill it with some color 3. Duplicate that layer and rename the new layer "sample-rollover" 4. Fill the rectangle in sample-rollover with a different color 5. Save the document with any name you like 6. Open SiteGrinder from Photoshop's File->Automate menu 7. Click the "Build" button at the bottom of the SiteGrinder window. That's it!

Some important facts about graphical rollover buttons:

Buttons and rollover don't have to be rectangles, they can be any graphic as long as at least part of the "-rollover" version intersects with the "-button" version. The "-button" and "-rollover" hints can even be added to layer sets! In those cases SiteGrinder will use the contents of the layer sets to make the button states.

The "-button" and "-rollover" hints can be abbreviated as "-b" and "-r"

If the part of the button layer name before the hint (i.e. the "sample" part of the "sample-button" layer name) matches to a page SiteGrinder is building, SiteGrinder automatically programs the hyperlink for you.

If a button is hidden, SiteGrinder will not output it, even if the rollover version is visible. The rollover version can be visible or hidden.