Test Index   ·   Photo Borders   ·   Table of sliced images - Rounded corners   ·   Sliced images and manually linked   ·   Overlap Images   ·   Create a Watermark   ·   Gif Png Transparency   ·   Buttons-Image Links   ·   Image Names   ·   Image Theft   ·   Lake Applet   ·   Other applets   ·   Slideshow1   ·   Slideshow2   ·   Slideshow3   ·   Galleries   ·   DD Thumbnail Viewer   ·   image map   ·   xara thumbnail   ·   Random Image   ·   LOGO BRANDING   ·   Animated Image   ·   photo with sound

Buttons-Image links
Make your own buttons for your website.  Use an image for links.
Start with an image of something that suits your site.


I have used a lavender embroidered flower from this site that offers machine embroidery work at reasonable prices.  The site is also built with CSB and is growing so please visit to support other CSB users!

Then tweak it by stretching, shrinking, beveling, adding text, etc to create images that represent your ideas.
Any Photo program will do. The two I use most often for this work are Paint Shop Pro and Irfanview.

Below are just a few of the things you can do with the lavender flower.  You could put text on the flower, around the flower, etc.  Let your imagination and your own site dictate how you create your link images.
 Stitched4You can make embroidered labels for your quilts.

Stitched4You can make embroidered labels for your quilts.


This one is a rollover:
the link reloads this page
(code available below)
      Stitched4You can make embroidered labels for your quilts.              Stitched4You can make embroidered labels for your quilts.                Stitched4You can make embroidered labels for your quilts.


                         Stitched4You can make embroidered labels for your quilts.           Stitched4You can make embroidered labels for your quilts.

Use Insert > Picture > Image/Clipart  and choose your button images.

Right click the image, properties, image to type in a description that hovers over the image on mouseover (more details on the image tooltip here).

Right click an image and choose to link to one of your pages either by SELECTION on the map or by URL style link.  The five button samples above have been linked to the home page of the site that embroidered the original design using the URL style link.

All 7 buttons above are JPG images placed into a table with a background color to match, but they could have easily been made into GIF images with a transparent background to be placed on ANY color background. Take a look at this page for information on transparent gif images.


 ROLLOVER BUTTON CODE for sample above
To capture the code, press Select All then COPY the contents.
Place code into an Insert HTML (Webgem in Trellix)
MUST change each gEMDIR to GEMDIR before using code!
Select All
I have made notes in code below and it will effect functionality!
Use the Select All choice above!
Change items marked in color in the code shown below.

The code below has been modified for use in CSB and Trellix.  (If not using either of those programs, replace ^GEMDIR/ with the directory where your images will be stored.)


<SCRIPT LANGUAGE="JavaScript">  
 <!--
 function newImage(arg)
 {
   if (document.images)
  {
   rslt = new Image();
   rslt.src = arg;
   return rslt;
  }   
 }
 function changeImages()
 {   
 if (document.images && (Rollover == true))
  {
   for (var i=0; i<changeImages.arguments.length; i+=2)
  {   
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];   
  }
 }   
 }
 var Rollover = false;
 function preloadImages(){
  if (document.images){
    emailoff = newImage("^GEMDIR/buttonquiltlabelslongbevel.jpg");  
    Rollover = true;
    }
  }
 preloadImages();
 //-->
 </SCRIPT>
 <A HREF="id138.htm" target="_top" ONMOUSEOVER="changeImages('Reload this page', '^GEMDIR/buttonquiltlabelslonginset.jpg'); return true;" ONMOUSEOUT="changeImages('Reload this page', '^GEMDIR/buttonquiltlabelslongbevel.jpg'); return true;" Target="_Parent">
<IMG NAME="Reload this page" SRC="^GEMDIR/buttonquiltlabelslongbevel.jpg" WIDTH=146 HEIGHT=35 BORDER=0></A>