/bodyshop/restrictive.htm. The descriptive text (between the <p>what type of critter would you like to be?

Size: px

Start display at page:

Download "/bodyshop/restrictive.htm. The descriptive text (between the <p>what type of critter would you like to be?"

Ginger Tracey Day
5 years ago
Views:

1 <html> <head> <title>generic Bodyshop</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <script src=" </head> <body bgcolor="#ffffff" text="#000000"> <form name="colorpicker"> The descriptive text (between the <p>what type of critter would you like to be? option tags) can be anything you <select name="species" onchange="top.change_species()"> like, but the tag values must exactly <option value="cow">cow</option> match your species.js entries. <option value="chicken">chicken</option> </select> </p> <table height="320"> <td></td> <p>color your character by clicking colors. <p>when you're ready, click <input type="button" value="preview" onclick="top.preview()"><br> <script> function show_palette(species) if (species=="cow") top.show("cowpalette"); top.hide("chickenpalette"); var theform=document.forms.colorpicker; theform.color1.value="98825e"; theform.color2.value="402211"; theform.color3.value="d99794"; top.show("chickenpalette"); top.hide("cowpalette"); var theform=document.forms.colorpicker; theform.color1.value="df1b10"; theform.color2.value="b8a88a"; theform.color3.value="0d4007"; This function (if present) is called whenever the user changes their species choice. Based on their selection, you must show the appropriate palette and hide the others. Additionally, you need to set an initial color. Initial colors did not have to be set in the basic.htm, but if you don't do it here, the user will be able to select one set of colors and then change species so the colors will be absurd again. 1 of 8 09/16/01 10:09 PM

2 function Cow_xy(x,y,active) if (y>257) return top.interpolate('d9a8a7','e01c10','d9a8a7','e01c10', x/100,(y-257)/43,3); return top.interpolate('e01c10','6e3046','e01c10','6e3046', (x-100)/100,(y-257)/43,3); if (y>129) return top.interpolate('972d1f','3d200e','898995','795437', x/100,(y-129)/128,2); return top.interpolate('3d200e','3c2110','795437','622920', (x-100)/100,(y-129)/128,2); return top.interpolate('1f211e','3c210e','ffffff','faf1b8', x/100,y/129,1); return top.interpolate('3c210e','622920','faf1b8','775637', (x-100)/100,y/129,1); Take all your xy functions (created when you made your palettes) and place them here. You must give each of them a unique name. function Chkn_xy(x,y,active) if (y>171) return top.interpolate('f88d2d','775637','004003','21201e', x/100,(y-171)/129,3); return top.interpolate('775637','775637','21201e','22003e', (x-100)/100,(y-171)/129,3); if (y>43) return top.interpolate('ffffff','faf1b8','775637','3d200e', x/100,(y-43)/128,2); return top.interpolate('faf1b8','622920','3d200e','20201e', (x-100)/100,(y-43)/128,2); return top.interpolate('f4cdcc','e11b10','f4cdcc','e11b10', x/100,y/43,1); return top.interpolate('e11b10','6e3046','e11b10','6e3046', (x-100)/100,y/43,1); </script> <input type="hidden" name="color1"> <input type="hidden" name="color2"> <input type="hidden" name="color3"> <p><a href="javascript:top.map()">back to map.</a></p> </form> 2 of 8 09/16/01 10:09 PM

3 <div id="cowpalette" style="position:absolute; left:13px; top:67px; width:223px; height:300px; z-index:0; visibility: hidden"> <script> if (top.ie4) document.write ( "<a target=junk href=about:blank "+ "onclick=top.current_palette=cow_xy;settimeout('top.pick()',100)>" ); document.write ( "<a target=junk href=blank.htm onclick=top.current_palette=cow_xy>" ); </script> <img src=" width="200" height="300" border="0" ISMAP> </a> <div id="cow1" style="position:absolute; width:123; height:206; z-index:1; left: 263px; top: 46px; visibility: hidden"> <table border="0" cellspacing="0" cellpadding="0" width="123" height="206" id="cow1table"> Place your palettes in layers so they can be hidden. Notice how the link refers back to the appropriate xy function. <td align="center"><img src=" width="119" height="202"></td> <div id="cow2" style="position:absolute; width:153; height:196; z-index:1; left: 332px; top: 193px; visibility: hidden"> <table border="0" cellspacing="0" cellpadding="0" width="153" height="196" id="cow2table"> <td align="center"><img src=" width="149" height="192"></td> <div id="cow3" style="position:absolute; width:128; height:161; z-index:1; left: 232px; top: 234px; visibility: hidden"> <table border="0" cellspacing="0" cellpadding="0" width="128" height="161" id="cow3table"> <td align="center"><img src=" width="124" height="157"></td> 3 of 8 09/16/01 10:09 PM

4 <div id="chickenpalette" style="position:absolute; left:13px; top:67px; width:223px; height:300px; z-index:0; visibility: hidden"> <script> Create a palette layer if (top.ie4) for each species. document.write ( "<a target=junk href=about:blank "+ "onclick=top.current_palette=chicken_xy;settimeout('top.pick()',100)>" ); document.write ( "<a target=junk href=blank.htm onclick=top.current_palette=chicken_xy>" ); </script> <img src=" width="200" height="300" border="0" ISMAP></a> <div id="chicken1" style="position:absolute; width:129; height:149; z-index:1; left: 260px; top: 41px; visibility: hidden"> <table border="0" cellspacing="0" cellpadding="0" width="129" height="149" id="chicken1table"> <td align="center"><a href="javascript:top.click_color(1)"> <img src=" width="125" height="145" border="0"> </a></td> <div id="chicken2" style="position:absolute; width:98; height:196; z-index:1; left: 246px; top: 176px; visibility: hidden"> <table border="0" cellspacing="0" cellpadding="0" width="98" height="196" id="chicken2table"> <td align="center"><a href="javascript:top.click_color(2)"> <img src=" width="94" height="192" border="0"> </a></td> <div id="chicken3" style="position:absolute; width:157; height:193; z-index:1; left: 319px; top: 217px; visibility: hidden"> <table border="0" cellspacing="0" cellpadding="0" width="157" height="193" id="chicken3table"> <td align="center"><a href="javascript:top.click_color(3)"> <img src=" width="153" height="189" border="0"> </a></td> 4 of 8 09/16/01 10:09 PM

5 <div id="samplelayer" style="position:absolute; width:280px; height:115px; z-index:1000; left: 98px; top: 47px; visibility: hidden"> <table border="1" bgcolor="#ffffcc"> <td> <table width="100%"> <td><img width="175" height="350" name="sample"></td> <td align="center"> <p><b>look okay?</b></p> <p><a href="javascript:top.yes()">yes</a></p> <p><a href="javascript:top.no()">no</a></p> </td> </td> <div id="wait" style="position:absolute; width:200px; height:115px; z-index:1001; left: 141px; top: 130px; visibility: hidden"> <table border="1" bgcolor="#000099"> <td align="center" width="250" height="200"> <font color="#ffff00" size="6"><b>please<p>wait</b></font> </td> </body> </html> Layers: There are tons of layers in the bodyshop. Layers are referenced by name, so be careful to name them exactly. Here's a summary of the layers the code expects to see: Cow1, Cow2, Cow3 (assuming you have a species called "Cow"). These hold the three bodypart GIFs dicussed later. These layers should default to hidden and contain a table named (or with a named cell) of Cow1table, Cow2table, and Cow3table respectively. This redundancy is to make the code work both in Internet Explorer and Netscape since they do everything different. Chicken1, Chicken2, Chicken3. You have to repeat this sort of thing for every species you will provide. CowPalette, ChickenPalette. These layers are only referred to by your own show_palette function, so you could name them most anything. Do not, however, put an underscore ("_") in the layer names. This messes up Netscape. samplelayer. This is used to preview a sample of the selected colors. You may change this layer in a lot of ways, but the code will not resize the image, so you must make sure that all your samples are the same size. Be careful to place this layer so it does not overlap any form elements like text-fields, drop-downs, and buttons. These will show through the layer in Netscape and look unprofessional. wait. This layer can be anything you want. It is displayed to tell the user to hold on while the poses are created. 5 of 8 09/16/01 10:09 PM

Netscape: Most chat users will be browsing your website in Internet Explorer. It is the most popular of the browsers, but it does not have 100% of the market.

6 Netscape: Most chat users will be browsing your website in Internet Explorer. It is the most popular of the browsers, but it does not have 100% of the market. Much of the seemingly pointless code above is to support Netscape users. Unless you do not wish to support Netscape (and therefore Macintosh) users, we highly recommend you test your changes in Netscape. Bodypart GIFs: Creating the bodypart GIFs is the hardest part of designing a bodyshop. Although you can do these GIFs however you like (or even not at all, if you choose) we do them in the following way. Note that the details of this process are outside the scope of this FAQ. Why use bodypart GIFs? Why not just use the recoloring program whenever the user picks a color? The answer is two-fold. First, the recoloring program runs on the server, so there is lag time whenever it is used. Secondly, the recoloring program uses valuable processing power. If every bodyshop used the program for every click, it wouldn't take long before the server was brought to its knees. Misuse of the recoloring program may result in a cancellation of your service. Step 1: Break your sample image into pieces. Step 2: transparent. Each piece must focus on one of the three controllable colors. Take that color (and all shades thereof) and turn it 6 of 8 09/16/01 10:09 PM

7 Step 3: Turn the bodypart black & white so that the remaining varcolors do not distract from the color the user has selected. 7 of 8 09/16/01 10:09 PM

8 Javascript Tricks: With a little programming, you can take advantage of some information we provide for you via Javascript objects. In addition to the top.map, top.change_color, top.click_color, top.pick, top.change_species, top.preview, top.yes, and top.no functions (see the code, above) we also give you three general purpose functions and a handy objects. top.show(layer): Set layer to visible. top.hide(layer): Set layer to hidden. top.set_z(layer,z): Set the z-index of layer to z. top.user: top.user is an object with a whole lot of information about the currently logged in user. Some members you might want to use include: top.user.known_as (login name), top.user. , top.user.rlname, top.user.world and most importantly top.user.rank. Please note that we make this information available to you to allow you flexibility in your web design. You are obligated to respect the user s privacy in accordance with our privacy policy. Failure to do so can result in termination of service and even litigation. 8 of 8 09/16/01 10:09 PM

1 of 5 09/16/01 10:11 PM

1 of 5 09/16/01 10:11 PM bodyshop *** TESTBED *** var ie4=(document.all)? true:false; var currently_selected; var current_z;