Q: How do I make mouseover buttons ?
1) Upload the two "button images" you want to use to
    your file manager in SynthaSite.

2) Get the URL for each image. This will be the name of
    your site followed by "recources/yourimage.gif"

For example my two image URL's for the blue buttons are:


Here is a site that generates the code for up to six mouseover images for you: http://www.htmlbasix.com/
Once in the site type the two URL's in the form provided.

There are extra fields for more images and they also
allow you to turn your mouseover image into a link if you
like - See linking instructions below.

3) When you are done, click "generate script"

4) Copy both portions of script provided.

5) In SynthaSite drag and drop an HTML widget onto
    your page and paste both portions of script into the
    HTML editor.

6) Delete the instruction strings that look like this:

<!-- STEP ONE: Insert this code into the HEAD section of your HTML document -->
<!-- STEP TWO: Insert this code into the BODY of your HTML document -->

7) Click "ok" in the HTML editor and you're done.

8) Update your site.

Linking Instructions:

This link
will link to your home page.

and this link
will go to the previous page you were on - like
hitting the back button on your browser.

Hover over the blue button
Hover over the gold button
You can create 3D mouseover buttons
like these with ease. You can also
change the graphic parameters of
the buttons such
as 3D shape,
lighting, texture, material,
shadow and deformation.

Editing your code manually.
This is what the code would look like if you were to use two mouseover buttons.
Replace the "yoursite" with your own site and the "....gif" with your own images.
Replace the "yourlink' with the page or site you would like to link to - See the linking
instructions above.
<!-- Begin

loadImage1 = new Image();

loadImage1.src = "http://yoursite.synthasite.com/resources/
staticImage1 = new Image();
staticImage1.src = "http://yoursite.synthasite.com/resources/Blue.gif

loadImage2 = new Image();

loadImage2.src = "http://yoursite.synthasite.com/resources/
staticImage2 = new Image();
staticImage2.src = "http://yoursite.synthasite.com/resources/Gold.gif

// End -->


<a href="yourlink" onmouseover="image1.src=loadImage1.src;"
<img name="image1" src="http://yoursite.synthasite.com/resources/Blue.gif"

<a href="yourlink" onmouseover="image2.src=loadImage2.src;"
<img name="image2" src="http://yoursite.synthasite.com/resources/Gold.gif"


If you need more than six buttons you can copy the code above and paste it into notepad
and edit it as follows: (htmlbasix.com only allows you to generate the code for 6 buttons max.)

If you needed say 12 buttons you would need to upload 24 images to your file manager
in SynthaSite. ( 12 "static button images" and "12 mouseover button images" )

You will notice the above code is in two sections.
The First section is between the <!--Begin  and the //End-->
The Second section is after the </script>

Copy the First section 6 times (6x2=12). Number your images as follows: "....Image1",
"....Image2", to  "....Image12"

You need to do the same wth the Second section, also numbering from "...image1"
sequentially to "...image12"  Your code should have the following structure:


<!-- Begin

... Image1 .....
... Image2 .....
... Image12 ...

// End -->

... image1 .....
... image2 .....
... Image12 ...

To build your own website for free
SynthaSite link logo
Make a Free Website with Yola.