TagBot Templates from ISDN*tek

Photo Buttons for your Store or ME page.

Javascript code works on eBay and major new browsers.

Up to fifteen buttons per menu, stackable.

Turn your own hosted photos into 3D buttons without editing.

Buttons have visual 3D click effects.

Layout buttons in a horizontal row or vertical column.

Stack multiple button groups into grids.

Resize and gap buttons instantly.

Add mouse-hover captions.

PhotoButtons.tpl

[TagBot$Learn more about the designer of this Template =http://members.ebay.com/aboutme/shipscript][TagBot$IrfanView Free Desktop Image Editor =http://www.irfanview.com][TagBot$Free Online Image Editor =http://www.imagetweak.net][TagBot~INSTRUCTIONS: =
This is column of visually-tactile 3D photo buttons created with javascript. To preview this template, dbl-click the export tab. These Buttons have been tested on FireFox 1, Internet Explorer 6, Netscape7, Opera 7,  and eBay.

The exported code should be inserted wherever your buttons are to appear, typically within a table. Grids of photo buttons can be created by making multiple button groups and stacking them in a table.

Use your own thumbnail-sized photos to create the buttons. The program will add the 3D effect. Although buttons look best if they are all the same size, your images can be different sizes and the program will size and align them as needed. Choose the dimension for your button, and the program will apply that dimension to either the width or height, depending on whether a row or column of buttons will be made. You can also select a gap between buttons.

This program will make up to fifteen buttons.  Leave unused button labels blank. If you need more buttons, you can make two menus and stack them together. Or you can add the extra buttons to the list in the exported code.

When labeling the buttons, do not use quotes in the label, as quotes are used by the javascript code. The labels will display when the mouse lingers over a button.

The code will default to open the button links in the same browser window, or you can choose the option to open in a new window.

]
<script>
<!--
//=============================================
//  javascript Photo Buttons
//  created with free software from
//  www.isdntek.com/tagbot.htm
//  this copyright notice should remain in the code
//  copyright © 2004 ISDN*tek
//=============================================
//     3D Buttons will depress when clicked 
//     and display a caption when paused over.
//     Buttons have been tested on FireFox 1, 
//     Internet Explorer 6, Netscape 7, Opera 7,
//     and eBay.
// -------------------------------------------- 
var BtnLabel=new Array()   //-- don't edit this line
var BtnPhoto=new Array()   //-- don't edit this line
var BtnLink=new Array()    //-- don't edit this line

// -------------------------------------------- 
//     Change these fields for your buttons:
//     You may have any number of buttons.
//     Leave unused button labels blank.
//     Notice the quotation marks surrounding the 
//     text labels. Do not use quotes inside the label.
//     Links can open in the same window or a new window.
// -------------------------------------------- 
[TagBot- ][TagBot?BtnLbl01!Caption 1 =ClicPic - image gallery
][TagBot?BtnPhoto01:Photo 1 =http://www.isdntek.com/gif/clicpicscreen5.jpg
][TagBot?BtnLink01:Link 1   =http://www.isdntek.com/clicpic.htm

][TagBot?BtnLbl02!Caption 2 =RagTag - code tester
][TagBot?BtnPhoto02:Photo 2 =http://www.isdntek.com/gif/ragtagpage.jpg
][TagBot?BtnLink02:Link 2   =http://www.isdntek.com/ragtag.htm

][TagBot?BtnLbl03!Caption 3 =Rainbow - color picker
][TagBot?BtnPhoto03:Photo 3 =http://www.isdntek.com/gif/rainbowpalette.jpg
][TagBot?BtnLink03:Link 3   =http://www.isdntek.com/rainbow.htm

][TagBot?BtnLbl04!Caption 4 =TagBot - template manager
][TagBot?BtnPhoto04:Photo 4 =http://www.isdntek.com/gif/tagbottemplateoverlay.jpg
][TagBot?BtnLink04:Link 4   =http://www.isdntek.com/tagbot.htm

][TagBot?BtnLbl05!Caption 5 =NoClick - copy protection
][TagBot?BtnPhoto05:Photo 5 =http://www.isdntek.com/gif/noclickscreen.jpg
][TagBot?BtnLink05:Link 5   =http://www.isdntek.com/noclick.htm

][TagBot?BtnLbl06!Caption 6 =
][TagBot?BtnPhoto06:Photo 6 =http://www.isdntek.com/gif/x.gif
][TagBot?BtnLink06:Link 6   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl07!Caption 7 =
][TagBot?BtnPhoto07:Photo 7 =
][TagBot?BtnLink07:Link 7   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl08!Caption 8 =
][TagBot?BtnPhoto08:Photo 8  =
][TagBot?BtnLink08:Link 8   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl09!Caption 9 =
][TagBot?BtnPhoto09:Photo 9  =
][TagBot?BtnLink09:Link 9   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl10!Caption 10 =
][TagBot?BtnPhoto10:Photo 10 =
][TagBot?BtnLink10:Link 10 =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl11!Caption 11 =
][TagBot?BtnPhoto11:Photo 11 =
][TagBot?BtnLink11:Link 11   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl12!Caption 12 =
][TagBot?BtnPhoto12:Photo 12 =
][TagBot?BtnLink12:Link 12   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl13!Caption 13 =
][TagBot?BtnPhoto13:Photo 13 =
][TagBot?BtnLink13:Link 13   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl14!Caption 14 =
][TagBot?BtnPhoto14:Photo 14 =
][TagBot?BtnLink14:Link 14   =http://www.isdntek.com/etools.htm

][TagBot?BtnLbl15!Caption 15 =
][TagBot?BtnPhoto15:Photo 15 =
][TagBot?BtnLink15:Link 15   =http://www.isdntek.com/etools.htm]
[TagBot- ]
BtnLabel[1] ="[TagBot?BtnLbl01]"
BtnLabel[2] ="[TagBot?BtnLbl02]"
BtnLabel[3] ="[TagBot?BtnLbl03]"
BtnLabel[4] ="[TagBot?BtnLbl04]"
BtnLabel[5] ="[TagBot?BtnLbl05]"
BtnLabel[6] ="[TagBot?BtnLbl06]"
BtnLabel[7] ="[TagBot?BtnLbl07]"
BtnLabel[8] ="[TagBot?BtnLbl08]"
BtnLabel[9] ="[TagBot?BtnLbl09]"
BtnLabel[10]="[TagBot?BtnLbl10]"
BtnLabel[11]="[TagBot?BtnLbl11]"
BtnLabel[12]="[TagBot?BtnLbl12]"
BtnLabel[13]="[TagBot?BtnLbl13]"
BtnLabel[14]="[TagBot?BtnLbl14]"
BtnLabel[15]="[TagBot?BtnLbl15]"

BtnPhoto[1] ="[TagBot?BtnPhoto01]"
BtnPhoto[2] ="[TagBot?BtnPhoto02]"
BtnPhoto[3] ="[TagBot?BtnPhoto03]"
BtnPhoto[4] ="[TagBot?BtnPhoto04]"
BtnPhoto[5] ="[TagBot?BtnPhoto05]"
BtnPhoto[6] ="[TagBot?BtnPhoto06]"
BtnPhoto[7] ="[TagBot?BtnPhoto07]"
BtnPhoto[8] ="[TagBot?BtnPhoto08]"
BtnPhoto[9] ="[TagBot?BtnPhoto09]"
BtnPhoto[10]="[TagBot?BtnPhoto10]"
BtnPhoto[11]="[TagBot?BtnPhoto11]"
BtnPhoto[12]="[TagBot?BtnPhoto12]"
BtnPhoto[13]="[TagBot?BtnPhoto13]"
BtnPhoto[14]="[TagBot?BtnPhoto14]"
BtnPhoto[15]="[TagBot?BtnPhoto15]"

BtnLink[1] = "[TagBot?BtnLink01]"
BtnLink[2] = "[TagBot?BtnLink02]"
BtnLink[3] = "[TagBot?BtnLink03]"
BtnLink[4] = "[TagBot?BtnLink04]"
BtnLink[5] = "[TagBot?BtnLink05]"
BtnLink[6] = "[TagBot?BtnLink06]"
BtnLink[7] = "[TagBot?BtnLink07]"
BtnLink[8] = "[TagBot?BtnLink08]"
BtnLink[9] = "[TagBot?BtnLink09]"
BtnLink[10]= "[TagBot?BtnLink10]"
BtnLink[11]= "[TagBot?BtnLink11]"
BtnLink[12]= "[TagBot?BtnLink12]"
BtnLink[13]= "[TagBot?BtnLink13]"
BtnLink[14]= "[TagBot?BtnLink14]"
BtnLink[15]= "[TagBot?BtnLink15]"

// -------------------------------------------- 
//     Do you want all links to open in a new window? 
//     Insert "Y" or "N".
// -------------------------------------------- 
var NewWindow = "[TagBot#Open Links in a new Window? =N|Y]"

// -------------------------------------------- 
//    Do you want a horizontal row of buttons or 
//      a vertical column of buttons?
//      Insert "Row" or "Col"
//    Select one size for your buttons. One side 
//      will use the fixed dimension and the other 
//      side will adjust automatically, depending 
//       on whether your use rows or columns.
//    Select a gap between buttons.
// -------------------------------------------- 
var BtnStyle= "[TagBot#Vertical Column or Horizontal Row =Col|Row]"    // choose "Col" or "Row"
var BtnSize = "[TagBot#Button Size =80]"
var BtnGap  = "[TagBot#Button Gap =2]"

// -------------------------------------------- 
//           End of modification section.      
//           Do not edit below.         
// -------------------------------------------- 
var quot="'"
var pos=NewWindow.indexOf("Y");
if (pos>=0){BtnWindow=" target=_blank"}else{BtnWindow=""}
document.write('<table cellspacing=0 cellpadding='+BtnGap+' border=0>')
var pos=BtnStyle.indexOf("w");
if (pos>=0){BtnStyle="height";document.write('<tr>');}else{BtnStyle="width";}

for (i = 0; i < BtnLabel.length; i++){if (BtnLabel[i]){
if (BtnStyle=="width"){document.write('<tr>')}
document.write('<td valign=center style="'+BtnStyle+':'+BtnSize+';">'+
'<a href='+BtnLink[i]+BtnWindow+' style="text-decoration:none;"><img '+
' src="'+BtnPhoto[i]+'" '+BtnStyle+'='+(BtnSize-5)+' title=" '+BtnLabel[i]+' "'+
'  alt=" '+BtnLabel[i]+' "'+
'  style="background-color:silver;                       '+
'    border-style:solid;		                 '+
'    border-left-width:  2;  border-left-color:  white;  '+
'    border-top-width:   2;  border-top-color:   white;  '+
'    border-right-width: 3;  border-right-color: gray ;  '+
'    border-bottom-width:3;  border-bottom-color:gray ;" '+
'  onmousedown="'+
'    this.style.borderLeftWidth  =3; this.style.borderLeftColor=  '+quot+'gray' +quot+';  '+
'    this.style.borderTopWidth   =3; this.style.borderTopColor=   '+quot+'gray' +quot+';  '+	
'    this.style.borderRightWidth =2; this.style.borderRightColor= '+quot+'white'+quot+';  '+
'    this.style.borderBottomWidth=2; this.style.borderBottomColor='+quot+'white'+quot+';" '+
'  onmouseup="'+
'    this.style.borderLeftWidth  =2; this.style.borderLeftColor=  '+quot+'white'+quot+';  '+
'    this.style.borderTopWidth   =2; this.style.borderTopColor=   '+quot+'white'+quot+';  '+
'    this.style.borderRightWidth =3; this.style.borderRightColor= '+quot+'gray' +quot+';  '+
'    this.style.borderBottomWidth=3; this.style.borderBottomColor='+quot+'gray' +quot+';" '+
'  onmouseout="'+
'    this.style.borderLeftWidth  =2; this.style.borderLeftColor=  '+quot+'white'+quot+';  '+
'    this.style.borderTopWidth   =2; this.style.borderTopColor=   '+quot+'white'+quot+';  '+
'    this.style.borderRightWidth =3; this.style.borderRightColor= '+quot+'gray' +quot+';  '+
'    this.style.borderBottomWidth=3; this.style.borderBottomColor='+quot+'gray' +quot+';" '+
'  ></a></td>')
if (BtnStyle=="width"){document.write('</tr>')}
}}
if (BtnStyle=="height"){document.write('</tr>')}
document.write('</table>')

//=============================================
//  end of javascript Photo Buttons
//  created with free software from
//  www.isdntek.com/tagbot.htm
//=============================================
//-->
</script>