SiteSpinner already contains a tool that will produce rounded corners on a rectangular shape. However, that tool rounds all four corners. This script is capable of rounding individual corners or combinations of corners.

If you have used the SiteSpinner rounding tool, you have learned that the resulting shape is always converted to an image file. This script works while the browser builds the page for display, so it does not produce an image file. It also works on any SiteSpinner object, not just the rectangle shape.

This script is provided by Alf Magne Kalleland at dhtmlgoodies.com. It has been tested on Firefox 2, Internet Explorer 7, Opera 9, and Safari 3 (Windows). The zip file contains:

• rounded-corners.html (dhtmlGoodies demo HTML file)
• js/rounded-corners.js (javascript file)
• roundcorners.ims (SiteSpinner sample project file)
• doc/* (documentation)

Of these files, you will need to upload the rounded-corners.js script file to your site. To use the script, begin by adding the following into your page’s custom header:

<script src="rounded-corners.js" type="text/javascript"></script>

If the script has not been saved in your root folder, adjust the "src=" parameter to include the required path to locate the script on your site.

Rounded corners are added to an object by including the following script in a code object on your page.

<script type="text/javascript">
rC = new DHTMLgoodies_roundedCorners();
rC.addTarget("Oobj-name",x-radius,y-radius,"obj-color",
     "corner-color",padding,obj-height,"corner-specs");
rc.init();
</script>

where

The code object containing the script execution code must be placed at the bottom of the page. This is accomplished by using the "To Front" button   on SiteSpinner’s bottom tool bar. Be careful if you add additional objects to your page after setting the code object to the bottom of the page. These additional objects, by default, will be added to the bottom of the page, so the code object will need to be repositioned. You may get around this problem by setting the geometry name of the code object to the special name of BELOWBODY.

Some examples:

1. rC.addTarget("Oobj16",15,15,"#ae51ae","#fff",0,30,"top_right");
2. rC.addTarget("Oobj17",15,15,"#ae51ae","#fff",0,false,"top_right,bottom_right");
3. rC.addTarget("Oobj22",15,15,"#3399ff","#ffffff",0);

In examples 2, you can see that the obj-height value is not used, so a dummy value (false) is used. In example 3, both the obj-height and corner-specs are not used, and since they are optional, they can be omitted. Note that the script can handle the special 3-digit hex color coding method. However, it cannot handle the (R,G,B) coding method.

How It Works

Because the script effect is not visible in SiteSpinner’s WYSIWYG environment, you need to understand how the round corners are added to your object so you can adjust your object placement on the work page.

The rounded corners are additional <div> blocks that are "attached" to the specified corners of your existing object. The height of these blocks is determined by the y-radius value. For example, in order to get a curve with a y-radius of 15 pixels, the height must be at least 15 pixels to accommodate the y value.

Below are three copies of a single text object. On the work page, examples A & B have been arranged so their top edges are aligned, while examples A & C have their left edges aligned. The script used x-radius and y-radius values of 15 pixels. Item D has used a padding value of 8 pixels.

Comparing examples A & B, you can see how the scripts have created an extra <div> block which offsets the original position by the y-radius value (15 pixels). Since bottom corners were also used, an extra <div> block was added to the bottom of the text object. Example C shows that no change in horizontal positioning was made. Example D shows the effect of the padding parameter which acts the same as using a CSS padding style on the text object.

The above examples show the effects of the script on SiteSpinner text objects. The same result occurs when using image objects, titles, tables, and even i-frames. The padding parameter only works with text objects since text can be adjusted to fit a defined width (auto-wrap). Images, i-frames and tables do not offer this feature. When using the script with images, including shape objects rendered by SiteSpinner, the object fill color will not be visible unless the image allows transparency.

A special case is the SiteSpinner rectangle shape. SiteSpinner allows this shape to have its re-render and anti-alias options turned off. With the object’s border set to zero, the object is displayed using normal HTML and not as an image. When used in this manner in conjunction with the round-corner script, you get a shape displayed on your page without using an image. This reduces page loading time and bandwidth.

Playing with the rectangle shape object and the script parameters can yield some interesting objects.