Introduction
Welcome

Tymax System can be found at http://www.tymax.com/ remember to frequently visit the site for future upgrades and new software. ( See watching tymax.com for updates )

If you like this program and wish to see more features added then please - buy a registration code.

Most pages on the Web contain pictures. The HTML format provides a means of associating a single hyperlink with a picture. By clicking on a picture a user can be transported to a different page, start a download, send an Email, etc. Generally the entire rectangular region of the picture has the same associated link. Image Maps, are used to subdivide a picture into regions - each region is given it’s own link. Imagine for a moment that you have a single picture of a face - you want to click on the eyes, nose or mouth and get the Internet Browser to respond differently in each case - this problem falls into the domain of Image Maps.

This program creates ‘client-side’ Image Maps as opposed to ‘server-side’. It creates both the Image Map and the image file ( GIF format is default ). The program also contains an update wizard which allows the insertion of Image Maps into multiple HTML files, making future management so much easier.

For more information on Image Maps check out the Internet, we found so many Tutorials that we decided not to include one here.


Opacity Settings

Using this control, the opacity of the current graphics can be altered. The opacity varies between 0% ( totally transparent ) and 100% ( totally opaque. )

Note, not all elements support opacity. The background cannot have it’s opacity changed. You can be absolutely terrible at Art but still make something look half decent by using Opacity.


Layer Settings

Using these controls, the layer of the current graphic can be changed. The layer of an element is the order in which it is drawn.

Layering is an important aspect for controlling which portions of an image are clickable ( in an Internet Browser ).

TIP, a good finishing technique. Load a bitmap and give it the highest layering - use the URL formatter and make the graphic non-clickable. Then use opacity to blend in the image.


Position and Size settings
Position Settings

These controls can be used to set the size and position of a graphic. All positions and sizes are in pixel units


Angle Settings

It can be quite tedious using the mouse to set a graphic’s angle of rotation. These controls provide a means of accurately specifying the angle.

NOTE, the angle of rotation is in degrees. Rotation is clockwise.


Colour Settings

Only polygons and text can have their colours changed. Bitmaps ( pictures ) currently don’t support colour ( actually, we couldn’t figure out a reasonable way for Bitmaps to interpret colour - can you? )


Font Settings

There are several buttons for controlling the style of the rendered text. The style can be a mixture of any of the following;

Italic - Text is rendered in the selected font and is drawn leaning from left to right.

Underline - Text is rendered with a solid line beneath each character.

Boxed - A parallelogram is drawn around the text, text is then rendered onto the parallelogram..

Bold - The text is rendered with each character being given added thickness.

Strikeout - The text is rendered with a solid line running horizontally through each character’s middle.


URL settings
URL (Universal Resource Locator ) Settings

Each graphic can have its own Universal Resource Locator. This is also known as a hyperlink. For more information on hyperlinks consult the web.

Local Website Folder.

Use this control to select the root folder that your Website resides in. When the drop down list ( See Universal Resource Locator ) is activated - each HTML found in this folder and sub folders will appear in the list. These can then be selected as valid URLs. The URLs of these files are relative to the root. i.e. the drive designator and all folders leading up to and including the root are removed from the files’ pathname.

i.e c:\windows\desktop\my website\pics\index.gif

If ‘my website’ is selected as the root folder the file index.gif will be given the relative URL of pics\index.gif.

HREF

Use this field to assign a Hyperlink to each area within the Image Map. Leaving this field blank will omit the HREF field from the AREA tag.

Alternative Text

When the mouse pointer moves over a graphic in an Internet Browser this text will be displayed - every Browser tested had its own way of handling this. Leaving this field blank will omit the ALT field from the AREA tag.

JavaScript: OnMouseOver, OnMouseOut, OnClick.

These fields have been supplied for you to attach appropriate JavaScript handlers to each Image Map area. Note that TS-ImageMapper will pre-write the OnMouseOver, OnMouseOut and OnClick attributes up to the equal sign and the opening double quote. TS-ImageMapper will automatically close your expression with a double quote. Only single quotes should be used in your expressions where required.

Designate as a “Non Clickable Area”

When this control is checked the graphic will be regarded as a static image and the URL will be ignored. A polygon for this graphic will not be placed in the MAP section of the HTML file. This results in an Image Map that behaves as though the graphic is not there.


Setting the dimensions of an Image Map
Image Map Dimension Settings

Use this to set the target size of the Image Map graphic. There are two special buttons which provide the following functions;

Background.

This button will set the Image Map to the same dimensions as the background graphic. This option is only useful if the background graphic is of the non-tessellating variety i.e. the background graphic is the image of a panel or something similar.

Enclose.

This button will set the Image Map’s dimensions to the smallest rectangle that fully encloses all inserted graphics.

NOTE, the X and Y offset values are used to position the Image Map within the Editor, they have no bearing on the final ( Generated ) Image Map. All units are in pixels.


FAQ
Frequently Asked Questions

•	Some of my bitmaps get represented as rectangles in the Image Map. Why?

You need to create and save your PNGs with transparency. The polygon decomposition routine only works on PNGs saved with transparency. Note, the JPEG format does not support the use of transparency.


Acknowledgements
Acknowledgments

This software is based in part on the work of the Independent JPEG Group.

A very special thanks goes to the PNG Development Group.


Image Map Generation

Welcome to the HTML update wizard it will now help you insert this Image Map into your Web Pages.

If you do not yet have any Web Pages or you simply wish to sample TS-ImageMapper’s output please continue with the Wizard. It will let you insert your Image Maps into its Gallery file. The Gallery file can be viewed using any Web Browser.

Read about Preparing your documents for Image Maps


Specifying the location of the local website
Selecting the location of your Website

The Wizard needs to know the location of your HTML documents. It assumes that you have a copy of your WebSite available on your hard disk and its folder hierarchy is identical to that of the Web Server.

Example

Assume that you have the following three files on your hard disk.

c:\windows\desktop\file1.html, c:\windows\desktop\file2.html and c:\windows\desktop\private\file3.html

By selecting c:\windows\desktop as the root folder, each file would then have the following URLs;

file1.html , file2.html and private/file3.html.

Alternatively, selecting c:\windows as the root folder would mean that each file would be given the following URLs;

desktop/file1.html, desktop/file2.html and desktop/private/file3.html.

NOTE, each URL has a forward slash instead of a backwards slash.


Selecting Identifiers
Selecting which Identifier to use

The Wizard is scanning your HTML documents for Identifiers. Each file that is found is shown as a small icon with the file’s name to its right. Each valid Identifier found in this file will be shown just underneath that icon slightly offset to the right. Clicking on an Identifier will select it. All files containing this Identifier will be updated!

NOTE, you do not have to wait for all of your HTML documents to be scanned - the edit box can be filled in manually. It is not possible to progress to the next stage of the Update Wizard until an Identifier has been selected.


Making backups
Backups

If the ‘Make Backups’ option is checked each file will be backed up before it is modified.

If the ‘Update Permanent Log File’ option is checked a report of the update procedure’s progress will be appended to a permanent log file stored in the target folder.


Updating a local website
The Update Stage

This page of the Wizard is provided for visual feedback from the update process.

The Image Map is being constructed from polygons. These polygons are being dynamically created.

Each valid html file in the folder that you selected is being modified with the new Image Map data.

The update process terminates with the saving of the image files. There can be more than one image file depending on which Wizard options you have chosen.


The output image
Generate the Image File

The wizard wants to know which file format to save your image in. There are currently two choices;

PNG FILE FORMAT

PNG stands for Portable Network Graphics. This is the replacement format for GIF * Graphics Interchange File Format. PNG offers compression ratios equivalent to the GIF format. It also offers many other benefits not catered for in the GIF format. PNG is lossless compression - meaning that no information is lost from the image during the compression phase. The PNG specification is available as RFC 2083 and as a W3C recommendation <http://www.w3.org/TR/REC/png.html>.

JPEG FILE FORMAT

JPEG stands for Joint Photographic Experts Group.  This format is ideal for reducing images containing photographic information. It offers very good compression ratios. Be forewarned however, JPEG is lossy compression - meaning that information is lost from the image during the compression phase.

* The GIF file format has not been included due to patent issues involving the LZW compression algorithm.


Creating test files
Creating a test HTML file and Image Map

This page of the Update Wizard will create an HTML document called tymax.html and an image file. These files will be placed in the application’s root folder ( the folder where the application was installed ) in a sub folder called “Test Site”. These files should be viewed using an Internet Browser. The program is capable of launching the browser for you.


Preparing HTML files for Image Map insertion
How to prepare HTML documents for Image Map insertions.

Users of TS-ImageMapper 1.x ( beta ) should read the warning at the bottom of this document.

The Wizard can only insert Image Maps into existing documents, where those documents have been specially prepared. Basically, you must insert a hypertext link into your document using your preferred HTML editor. The link must take the following form;

<A NAME=”TYMAX_IMAGEMAP_s”>  PUT SOMETHING HERE </A>

Yes, it is an anchor. The NAME attribute is used to tell our program that it has permission to update this document. The s following TYMAX_IMAGEMAP_ should be a string ID that uniquely identifies this Image Map ( No spaces ). The string ID should be meaningful to you - the program really doesn’t care.

Examples;

<A NAME=”TYMAX_IMAGEMAP_MENU”> This is a menu </A>

<A NAME=”TYMAX_IMAGEMAP_TOOLBAR”> this is a toolbar </A>

<A NAME=”TYMAX_IMAGEMAP_MAP”> This is a map </A>

By using the same Identifier in multiple files you can get the program to update all  the files in one go.

How the update is performed.

Firstly the HTML document will be read. The anchors will be searched for the occurrence of the TYMAX_IMAGEMAP NAME. If the ID associated with the NAME is appropriate the entire tag is rewritten with the Image Map code and the Map data will be inserted into the document just after the HTML <BODY> tag -

NOTE

•	you can have more than one identifier in the same file.

•	 you can reuse the same identifier repeatedly in the same file providing image rollovers have not been selected ( the is a limitation of JavaScript. )

•	using the same identifier in multiple files enables you to update an entire site.

NOTE, when inserting the hyperlink into the document for the first time, you should make sure that there is some text between the <A> and </A> anchors.  Some HTML editors could see the absence of any text as a redundancy and might automatically remove the link ( it’s better to be safe than sorry. )

WARNING: Beta Versions 1.x of TS-ImageMapper used the HREF attribute of the HTML anchor to store the identifier. Version 2.x now uses the NAME attribute in preference. We will continue to use the NAME attribute in all future versions - using the HREF for the identifier is no longer supported.


License Agreement

USE OF THE TYMAX SYSTEMS’ TS IMAGEMAPPER SOFTWARE IS SUBJECT TO THE FOLLOWING TERMS AND CONDITIONS:

Copies of this package can be made provided that the software is in it’s "as originally distributed" form . Redistribution, must be free of charges.

The TS ImageMapper software package is a copyrighted product. You agree not to alter, decompile, disassemble, or otherwise reverse engineer TS ImageMapper for any purpose. Redistribution or resale is allowed only under the conditions specified above in this agreement or by express permission from Tymax Systems. Copying this software for any other purpose is a violation of UK/US copyright laws and other international treaties.

THIS SOFTWARE IS PROVIDED "AS IS" WITHOUT ANY WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. TYMAX SYSTEMS DOES NOT ASSUME ANY LIABILITY FOR ANY ALLEGED OR ACTUAL DAMAGES ARISING FROM THE USE OF OR INABILITY TO USE THIS SOFTWARE.


Release Notes

Version 1.0 - First Version

Prior to release the following deficiencies were noted in this version. These will be corrected in a future update.

A bug was located in the open project code. This only manifests itself under certain circumstances, if a project is opened and then another project is opened directly after it - the program crashes. This bug seems to be related to keyboard focus - sorry.

Version 1.1 - Changes and Fixes

GIF LHZ De-compressor - fixed buffer limitation removed ( this was a temporary measure in 1.0 )

Interlaced GIFs will now display correctly.

Added support for saving Interlaced GIFs ( don’t use it myself but hey ).

Version 1.2 - Changes, New Features and Fixes

Changed the AREA HTML tag’s shape attribute value from POLYGON to POLY.

Introduced Bitmap to Polygon technology which automatically decomposes a transparent bitmap into polygons ( cool! ).

Fixed the project focus bug.

Added an extra page to the update wizard.

Fixed the extra CR being placed in the HTML file.

Version 1.3 - Changes, New Features and Fixes

Introduced an edit control as an alternative means of editing labels.

Replaced the missing interlaced checkbox in the Update Wizard!

Added checkbox to enable/disable image previews.

Introduced rotations on bitmaps.

Introduced PNG ( pronounced ‘ping’ ) support.

Add support for full 24Bit alpha channels ( png )

Added a toolbar.

Alternative Text on URL editor wasn’t reporting changes so the ‘apply’ button never activated. This has been fixed.

Enhanced the polygon decomposition routine. It is now possible to click through hollow parts of an image on to an image that lays beneath. Image Map data will also now conform to the Image Map’s rectangular dimensions.

Added a new page to the update wizard for viewing updated files.

Fixed omission of ALT text whilst load project files.

Add fields for JavaScript.

If you manage to find a bug and it’s repeatable, please send an Email to bugs@tymax.com , please state; the steps required to cause the problem , the program’s name and the program’s version number.


Software updates
Watching www.tymax.com for software updates

Our Web Server’s statistics file indicates that a few people are using HTTP’s HEAD command on zip files stored on our Server. This is not a reliable means of detecting upgrades to our software - typically upgrades are stored in new files - so your browser is watching a file that will never change. To determine when upgrades are available add your Email address to our mailing list ( found at http://www.tymax.com/. )


Registration Codes

Registration codes are encrypted keys that will open this application for unrestricted use.

Registration codes can be purchased at http://www.tymax.com/ using a credit card - as of the time of writing they cannot be purchased anywhere else - nor should they be. Alternative means of payment can be arranged ( at a higher cost ) via Email.

The License Agreement ( as you know! ) already allows for ‘free use’  of this program for non-commercial use - however without a registration key the program will place a courtesy link to our site in all generated or modified files. If this is found to be unsuitable then a Registration code should be purchased. The code will internally mark the application as being registered and will prevent this function.


HTML Options

With this page of the Update Wizard you can;

Draw borders around hotspots.

Select this option if you would like TS-ImageMapper to draw a single pixel line around each of the areas defined in the Image Map. This feature was included to make it more obvious which areas within the Image Map can be clicked on. However it can be used to enhance the look of certain types of graphics.

Force all area shapes to be rectangles.

TS-ImageMapper defines all areas as polygons within the HTML Image Map i.e.  each graphic will be represented in the Image Map as a sequence of (x,y) coordinates;

<AREA SHAPE=”POLY” COORDS=”129,23,14,325, … “

Selecting the ‘Force all area shapes to be rectangles’ option forces the program to find the minimum rectangle that fully encloses this polygon. This rectangle will be used in the Image Map in preference to the polygon description.

Enable Image Roll Overs

This option is ideal for testing the power of TS-ImageMapper’s decomposition  algorithm. The program will insert JavaScript into your Web Pages which will change the Image as the mouse moves over each hot spot. This technique involves generating multiple image files which can be a time consuming process on slow machines.  This prohibits the reuse of the Identifiers on the same Web Page since this will confuse JavaScript. Also note, your browser must support and have JavaScript enabled.

Quote shape attribute

Use this option to place double quotes around the shape attribute.

<AREA SHAPE=”POLY” …

As opposed to

<AREA SHAPE=POLY …

We have included this option for greater compatibility with a number of third party image mapping programs.


Update Complete

The Wizard has now finished building your Image Maps, they have been inserted into the files shown on this page. Select a file that you want to view and then open it in your web browser, the button marked ‘open’ will achieve this. Don’t forget that you can use the Refresh/Reload buttons in your browser if the Image Map’s graphic doesn’t appear correctly.


No need for drawing

You don’t need to draw around anything in TS-ImageMapper. Simply create your graphics with transparency and then insert them - and that’s it. The program will produce outline drawings with far greater accuracy than you can and it will do it instantly.

Please register and show your support.


Order Form

In all cases please be sure to specify the product name as

TS-ImageMapper by Tymax Systems

Product ID 3065-1

Price 25 US Dollars

Then place your order using the most convenient method.

Credit  Card - Online.

https://www.regnow.com/softsell/nph-softsell.cgi?item=3065-1

No additional surcharges

Telephone.

Toll Free: 877-353-7297

Regular (International): 425-392-2294

An additional surcharge of $3.00 is placed on Telephone orders.

Fax.

Toll Free: 888-353-7276

Regular ( International ): 425-392-0223

TS-ImageMapper by Tymax Systems - product ID 3065-1

An additional surcharge of $2.50 is placed on Fax orders.

Check.

Make check/cheque out to “Register Now!”

Register Now!

Dept# 3065-1

PO Box 1816

Issaquah, WA 98027

United States of America

An additional surcharge of $2.50 is placed on Mail orders.

For International checks, we would prefer the funds to be drawn in US dollars. When this is not possible, we will accept checks for a corresponding amount in the country’s currency. Eurochecks are not currently accepted.


JPEG saving options

STANDARD ENCODING

This is the standard form of compression used on most JPEG image files.

PROGRESSIVE ENCODING

This is a technique for transmission over the Internet. The JPEG image is transmitted in multiple-passes, each pass will progressively add more detail to the image. The JPEG file will be encoded slightly differently to achieve this.

QUALITY

The quality is offered on a scale from 0 to 100. High quality > 80 will result in relatively large file sizes. Low quality < 50 will result in small file sizes.


PNG saving options

INTERNET PALETTE

The image is reduced into 216 colours in a palette that is used by all the popular browsers. This option significantly reduces file size.

TRUE COLOUR

The image is saved ‘as is’ with no information being lost. The file may contain up to 16 million colours. This format is good if you need to process your image further using a third party paint program.  If you are using an unlicensed version of TS-ImageMapper you must not remove the Tymax Logo from the image.

NON-INTERLACED

Non interlaced images are transmitted in a single pass. The special transmission encoding techniques are applied to the image.

ADAM7 INTERLACED

This is a technique for transmission over the Internet. The PNG image is transmitted in multiple-passes, each pass will progressively add more detail to the image. The PNG file will be encoded slightly differently to achieve this.


Changing the Threshold

Both GIF and PNG file formats support image transparency. The GIF format stores its’ colour information by making references to a palette ( max 256 colours ). A single colour from the palette can be designated as transparent all pixels stored with this colour are regarded by an image application as invisible. PNG also supports this method of transparency however it also supports non-paletted formats. These higher formats allow alpha information to be stored for each individual pixel within the image. Pixels can be stored with variable levels of transparency.

The threshold value ranges from 0 to 255 ( 255 is the default value. )  The threshold sets a limit for the polygon decomposition routine - all pixel having an opacity value greater than or equal to this threshold will be considered as solid all pixels lower than this threshold will be ignored.

To summarise if a PNG image is stored with alpha information let’s say it got drop  shadows which are semi-transparent. The drop shadows can be included or excluded from the Image Map by tweaking the threshold value.