[ Sample HTML page ]
[ Sample .js Code ]
[ View Size Options ]



Allwebco Design Corporation
Sample layered text. Note the space above this image.
Sample with layered text
 XML Flash Changer Add-On Setup:
 This script is intended to be added to Allwebco templates (or websites) that do not now have an XML Flash changer included. Click here for current info and options for this add-on.

Outline: (Steps on this page)
#1. Unzip and place files.
#2. Add changer code to a .js file or HTML page.
#3. Set changer options.
#4. Replace with your .jpg images.

STEP #1 Place Files: | More Details
Unzip the XML_Changer zip file and put the 10 .jpg images in this zip file "flash" folder in your template "flash" folder. Place the "image_changer_XML.swf" and "image_changer_addon.xml" in your main template folder. This should be the same folder with your index.html and about.htm.


STEP #2 Option A: (Add the Flash code to a .js file)
The add-on can be added to any .js file, however, it is recommended that you add this to either your sidebar.js or menu.js. Click here for the .js code and instructions.

Options for where to paste the code:
  1. In a sidebar.js: Add the code from the "sample-for-JS-files.htm" in this attached zip file to your sidebar.js. You can add this code in any blank area. One option would be to add this just before the "SMALL PICTURE AREA" note. Make a copy of your sidebar.js for backup and try pasting in the code and test your pages in a web browser.
  2. In a menu.js: If you have a vertical menu style you can probably add this to your menu.js. Make a backup of your menu.js. Open the menu.js and try pasting the code from the "sample-for-JS-files.htm" near the bottom of that file. Most likely you will add this just before some </td></tr></table> or </div> code. This may not work in some template models see the step below for HTML page options instead.
NOTE: You may need to make the changer smaller or larger. See the samples-XML_changer.html for size options.


STEP #2 Option B: (Add the Flash code to an HTML page)
Another option if you do not have the above .js files or you want to add this to an HTML page: Place the "image_changer_XML.js" in your main template folder. Copy the code below and paste this into any one of your HTML pages. In most cases you will paste this code into your "MAIN TABLE" or "CONTENT TABLE" area. Perhaps just at the end of your page text.





Or the code below will center the XML changer on your HTML page:






STEP #3 Set Options: | More Details
Test your template pages in a web browser. The changer should now be working. If not, see troubleshooting below. Now you can set options in the "image_changer_addon.xml". This file will be edited in a plain text editor like Notepad. Click to view the options.

Re-sizing the changer: Other sized .swf files have been included in the "extras" folder. Click to view size options.


STEP #4 Replace the Images: | More Details
You will now replace all the .jpg images in your "flash" folder. You have the option of either: 1. replacing the 10 "image?-xml.jpg" images, or 2. You can edit the "image_changer_addon.xml" in Notepad and indicate new filenames and new folder locations. Click for details and see "adding new slides".



TROUBLESHOOTING: | More Details
If you do the steps above and the changer is not working:
  1. Try doing the above steps again from the start.
  2. Your .jpg images may be saved incorrectly. Click for help and see "my images are not working".
  3. Perhaps your "flash" folder does not exist or is named incorrectly. Check this folder and rename it to all lowercase letters, or create it if needed.
  4. You are testing the wrong HTML page that you added the changer code to.
  5. If you used the HTML code from step #2 did you copy over the "image_changer_XML.js"?
  6. You are editing on-line files instead of files on your hard drive.
  7. You have not used ALL the code from the sample pages in this download. Redo step #2.
  8. You have an error in the sidebar.js or menu.js file. Click for help.
  9. If you have uploaded: Remember that hosting areas are case sensitive. Be sure all file and link names match exactly.
  10. NOTE: Always make backup files and test after each edit before you go to another edit. You can always delete your backups later.


OPTIONS:

GENERAL OPTIONS: | More Details
Speed, transition type looping, random or sequential options can all be set in the "image_changer_addon.xml". Edit this file in Notepad or a plain text editor. Click for help and see "speed, slide order and variables".

CHANGER SIZE OPTIONS:
Click for size options and instructions.

REPLACING IMAGES: | More Details
See step #4 above. If you need help setting up the changer images please click here.

ADDING MORE IMAGES: | More Details
You can add as many images to this changer as you need. To add more images edit the "image_changer_addon.xml". Edit this file in Notepad or a plain text editor. Click for help.

FADE-UP COLOR:
The samples and code in this download are setup for a transparent "fade-up". If you require a "fade-up" color you will need to remove <PARAM NAME="wmode" VALUE="transparent"> and the wmode="transparent" areas from the Flash code. If you remove this code it may cause problems if your website has drop menus or any layered objects so this is not recommended. If you are using HTML page code, edit the "image_changer_XML.js" for the fade-up color. If you are using the .js code edit the "XMLflashcolor" variable.

BORDER COLOR:
All code in the samples are using a black 1 pixel border. Edit the "000000" in the .js file to use a different color border.

FLOATING DIV HTML CODE: | More Details
The "image_changer_XML.js" allows you to freely move the changer around on the page using a DIV. To use this code edit the "var divlocate" to "yes" in the "image_changer_XML.js". If you use this code you can move the changer location by editing the "var divLR" the "var divXloc" and the "var divYloc" in this .js file.

NON-DIV HTML CODE:
The code from step #2 option B will place the changer wherever you paste this code in an HTML page. You may want to add 2 or 3 <br> before and after this code for spacing. In most cases paste this after a paragraph of text. For centering this on a page see the samples-XML_changer.html or the sample-HTML-page.htm.

MULTIPLE CHANGERS:
If your template now has a changer that is not this add-on then you can still add this changer and will then have two changers. In other words, this add-on will add an additional changer to any template that has a changer now.

This add-on includes only one changer with one set of images. You can add multiple cases of this changer to your .js files and/or HTML pages, however, both cases will be reading the file names from the "image_changer_addon.xml". In other words, both changers will show the same images but will be showing them randomly and will show them in a different order.

MULTIPLE CHANGERS DIFFERENT SIZES:
For two changers with different sizes, copy the two sized .swf files you require from the "extras" folder but do not rename them. Use the code as indicated in step #2 above. Then edit the word "image_changer_XML" in 4 places in the HTML or .js code with your selected .swf name. EXAMPLE: Replace "image_changer_XML" with "image_changer_XML-750x500" in 4 places to have a 750 x 500 changer. For this setup you will need to make a copy of the "image_changer_XML.js" for your different sizes.

LAYER TEXT OVER A CHANGER:
Items like text can be layered over a changer, however, this may create extra blank lines on your pages. We do not provide support for this but have included a sample on this help page. View the source in this help page and find the "SAMPLE LAYERED TEXT" note to see and copy this DIV layer code. You can layer text, links or images over the changer.