This page demonstrates one way to make clickable buttons using SiteSpinner only. The technique is to have two or three hidden images and display a different one depending on certain states of the mouse. These images correspond to mouse absent (normal), mouse hover and mouse down.
Next, copy and paste this image, making the background shade a little lighter. This will be the image which appears when you hover the mouse over the button.
Next, copy and paste the first image again to make the third image. Make it a little smaller all round. I have made this one two pixels narrower and one pixel shorter. This will be the image which appears when you click or mouse down on the button.
Mouse Effects
Now we are ready for the mouse effects. We want the first image to disappear when we hover the mouse over it -- and at the same time we want the second image to appear.
These effects are on the main SiteSpinner menu under Special FX > Mouse Effects. Hover the mouse over the first image to see the result.
Now, when we click on the second image, we want that one to disappear and the third one to appear. This effect is also available under Special FX. Click on the middle image to see the result.
Superimpose the Images
Stack the three images on on top of the other. The first image is at the front, then the second image. Finally the third image is underneath both the others and just a little lower down the page. To control the stack order, use the forward/back buttons on the bottom toolbar. Hover and click on the button to see the final effect.
.
Making the Link
Finally, we need a link to the home page. Normally we would put the link on the image, but because the image we would like to have the link on disappears when we click on it, we can't put the link there. So the trick is to have a fully transparent rectangle which sits on top of the button group, and that carries the link.
Make this rectangle a little larger than the button images, and set the following link:
- Link Type:
- Select or enter URL to link to:
- Assign a title:
I have left a border on the rectangle so you can see where it is. Also in the geometry editor, set the file rendering type to gif or png 8 -- these are the only two types which support transparency. Click on the rectangle and you should go to the home page.
Stack the transparent rectangle on top of the buttons. If necessary, do a 'bring to the front' operation (bottom toolbar) to achieve this. When previewing, if you don't see the cursor change (usually to a hand), it is likely that the rectangle is under the images. In this case, the link will not work unless you click just off the edge of the button but inside the rectangle.
Now I remove the border from the rectangle so you can see the finished working button. (In practice, you will have done this already.)
Adding a Shadow
I like buttons with a simple shadow underneath. This effect is easy to add. Start with a simple rectangle and add a gradient fill inside
The left-hand color is fully transparent. That way, you can place the shadow on any background and the color of the background will partly show through. I've deliberately put a yellow background here to show the effect. The image on the right shows my Shading Editor settings.
Now rotate the rectangle 270 degrees so that the darker part goes to the top.
Then resize to suit the width of your button and the depth of shadow you want.
Finally butt the shadow against the underside of the buttons. Make sure you place it so that it is behind all the button images.
Bruceee's Sandpit
Web Design with SiteSpinner
Making Buttons with SiteSpinner
-page-
index
Go to the home page
Basic Images
We'll start by making three slightly different images, one for each mouse state.
First, start with a simple text object, setting the font, text color and background to whatever appeals to your sense of beauty. Center your text in the image.
Grouping the Images
Having spent some time getting all the images aligned just how you want them, it is a good idea to make them all into a permanent group. That way you make it easy to reposition the whole package, or copy.
However there is a gotcha. If you include the transparent rectangle in the group, it prevents the mouseover effects from working. So in SIteSpinner 2.50b, I include not quite everything in the group. Group the three button images and the shadow, but not the transparent rectangle. Keep that rectangle as a separate object, and superimpose it last on top of the group.
Copying the Button
You can copy and paste the button to make several copies of the button on the same page as I have done here. You can also 'include' the button on different pages of your site, also as I have done here. However there it another gotcha here. Do not try to clone the button to have two or more clones on the same page. If you do, your browser will report a javascript error and mouseover effects will not work on any of the cloned buttons.
This is not a serious restriction, and you can use a clone on another page, just not the current page.
Deleting or Cutting the Button
If, after a button cut or deletion, you find that other mouseover effects no longer work, try an Edit > Clean Components from the main menu. This cleans out old Javascript code which when left behind, can cause errors and prevent other Javascript from working.
When you delete the button, if you can, use Delete rather than Cut. Delete is a more thorough option as it also deletes all clones and incudes of the button and the associated Javascript code. Before you do this though, make sure there are no clones or includes you want to keep.
Cut removes the current button, leaving any clones/includes behind, together with the Javascript code. If there are no clones, the Javascript is still left behind. Using the Clean Components command seems to remove this Javascript. At least, the remaining mouseover effects start working again.
Making similar buttons
Having gone to a lot of effort (it was for me first time round) to get your first button working and positioned just right, you may want some more buttons the same except for different text. You can do it the hard way by making a copy and ungrouping, or you can do this:
- Make a copy of the whole group
- Go to the drop down object list at the top of the workpage or in the Quick Editor
- Note the objects at the bottom of the list -- these are the ones that have most recently been created -- and so should be the parts of your copied button
- Use the Quick Editor to select each part of the button that contains text
- Open the text editor -- tell it you want to edit the existing object
- Make and save your changes
This approach allows you to edit the buttons while they are still part of the group.
Tweaking Buttons
Once you have grouped some objects, it becomes more difficult to make minor adjustments -- e.g. to move a shadow slightly. If you know the object name, you can call up the object in the Quick Editor, and make the adjustment while the object is still part of the group -- even see the effect immediately on the workpage. Another tweak I apply is to change the geometry and shade of the shadow for a copied button to reuse the same image as a previous button. See bandwidth.
If the button is one you have created recently you can likely find the parts near the bottom of the Quick Editor object drop down list. If however you created the button some time ago, there does not seem to be an easy way within SiteSpinner to find the components of a group. The Quick Editor is helpful by showing a thumbnail of the object selected, once you have selected the object. That's the hard part.
Here's where a devious nature helps. While previewing your code, use the 'View Code' option of your browser you look at the code for your page. Search for the the name of the group object (or the name of the button). You'll find all the individual objects that comprise the group often with names in sequence like Oobj868, Oobj869 and so on. These are the real object names with an 'O' prefix. Armed with that information, as before, you can use the Quick Editor to make the changes without ungrouping.
