Talking Machine (for Navigator V3.x or later only)
Description:
CoolMap is a Java applet which works as an image map.
It is COOL because it not only works as an image map but also comes
with a built-in design center which makes image map design and maintenance
visible. A sound will also be played when mouse is moved over a particular
hot area. The corresponding URL will be opened when clicking at a hot area.
Details about how to install it in your page is available in below.
are just added: background can be specified to use a transparent map!!
NOTE: Both Adware (FREE) and shareware (NOT FREE) versions are
available. The parameters marked with (share) are only
available in shareware version.
This Adware version has all the functions available for FREE. Only thing that you
have to "pay" is that you are not able to remove the button above the imagemap.
This button display the infor about the author's home page. To remove the button,
you need to register the shareware version.
:
********* You have to make sure the Adware version (FREE)
works fine in your server before you register the
shareware version because you are buying a Code.
That is, after you register the shareware (pay fee)
only thing you will recieve is a Code which can be
used to unzip the shareware package. The Code is
NOT refundable, NOT returnable, and NOT exchangable.
Don't register the shareware if you are NOT sure
- It REALLY WORK in your server
- You REALLY like to use the shareware.
Parameters:
mode - There are two values:
design - You can design you image map in this mode. In this mode,
you use Coolmap to generate a HTML script which calls
itself in Map mode. That is, after clicking at "Generate
HTML Script"button when you finish your design, you can get
the ready-to-plug-in HTML script in "HTML Scropt" field
at the bottom of Coolmap Design Center. Copy and Paste
it to your page.
map = This is the regular mode when the map is pluged in to your page
(You will eventually show your visitors the image map on your page
in this mode). The mode in HTML script generated by Coolmap Design
Center will be set to "map".
whichBase - 0 the applet uses DocumentBase. That is, applet will search resouces from
the directory where HTML file resides
1 applet uses CodeBase. That is, applet will search resouces from
the directory where Java class files resides.
background - URL of the Image which is used to paint caption area's background.
This URL has to be a local one such as "images/bbb.gif".
You can not use a URL that point to an address that is not in
the server where the applet resides. If parameter background
is valid, bgcolor will be ignored.
NOTE: Using an image as background will slow down the
scrolling speed dramatically. I may want to adjust the speed
to speed up the scrolling text. Or you can ignore parameter
background so that the applet use parameter bgcolor in order
to increase the srolling speed.
Why to use an image for background?
You may usually want to cover the entire applet area with the map.
But in some case such as using CoolMap as a toolbar, you may want
have more space to your tooltips while the toolbar image is relatively
small. If you add some blank space to the toolbar image to make
it cover a larger area so that your tooltips can be displayed properly,
it will take a large amount of time for the browser to load the large
image. Instead, if you use exactly space requiesd by toolbar but set
appletWidth and appletHeight large enough to hold your tooltips.
The area that is not covered my toolbar image will be covered with
the background image which is the same as the background on the page.
Another reason to use background image is that you can make use of
transparent gif if you like to have map image transparent. You can
use image editor like GIF Construction Set for Windows
to create transparent gif used as your map image or toolbar image.
You need to set the backgound parameter to the same as the background
on the page where Coolmap resides.
bgcolor - Color of caption background. This feature can be overrided by
parameter background(That is, if background presents, bgcolor
will not effect. You need to use the same code format like you use
in HTML script such as #ff00ff. You can also set fgcolor = "vary".
Value "vary" will give caption background a random color each time
the applet is called.
imageWidth - The width of your image which is used as the map. If the size you specify
is different from the actual size of the image, the result will be a stetch
one.
imageHeigth - The heigth of your image which is used as the map.
imageLeft - the horizontal position of top-left conner of them map image. In other word,
horizontal distance in term number of pixels from the top-left conner of the
applet area to top-left conner of them map image.
imageTop - the vertical position of top-left conner of them map image. In other word,
vertical distance in term number of pixels from the top-left conner of the
applet area to top-left conner of them map image.
appletWidth - width of applet in design mode. : this pair of parameters will appear
as Width and Height in HTML code which calls Coolmap (the Code generated
by Coolmap). That is, this is the place where is specify the size of Coolmap.
appletHeigth height of applet in design mode.
deskArrange - The arrangement of applet and design panel. It can be "LeftRight" or TopBottom"(default).
Note: if the space you specify is not enough for "LeftRight", it will be set to
"TopBottom".
hotStyle 0 - Coolmap will not show the border of a hotware when mouse cursor
is over the hotarea.
1 - Coolmap will show a frashing border of a hotware when mouse cursor
is over the hotarea.
tipsOn 0 - Disable tooltips.
1 - Enable tooltips.
imageWidth - The width of your image which is used as the map.
imageHeigth - The heigth of your image which is used as the map.
hintWidth - The width of tool tips window.
fontHeight - The heigth of tool tips window.
mapImage - File name of the image which is used as the map.
hot_area1 - The infor about hot area 1
hot_area1 - The infor about hot area 2
...
hot_arean - The infor about hot area n
New feature:
The fifth field of hot_arean work the same as
parameter "TARGET" in HTML. This field is named
Target Window in Design Center.
You can set it to a sub frame if you use frames so
that the URL is opened in the sub frame. You can
also set it to one of following
_top
Bowser will place URL page into top-level window of the browser
_parent
Bowser will place URL page into parent window of the widnow
where HTML resides
_self
Bowser will place URL page into the widnow where HTML resides
_blank
Bowser will place URL page into a new window
The sound played by this applet can be turn On/Off dynamically button another
applet wrtten by Mark Qian, CButton.
You are welcome to your URL
to Mark's Page:
if you have any Mark's applet running in your page.
This is a great place to make your site popular:
most visitors of this site are webmasters who are in charge of adding links!!
Detail Instructions for installation:
1).
or
What if downloading fails using the button above?
In this case, Go to Author's FTP Page directly to download them there!
Please Send us a message if you encounter
difficulty with downloading so that we can solve the problem shortly.
2). Unzip coolmap.zip in a tmp directory, say c:\tmp, in your local machine
3). Run SETUP.EXE unzipped from the package to tename class files (because
PKUNZIP will extract the class file, coolmap.class, to coolmap.CLA).
If you prefer to rename class files manully, you have to
rename the class file, coolmap.CLA, to coolmap.class
rename COMMON.CLA to common.class.
rename HINTPOT.CLA to hintpot.class.
rename IMGAREA.CLA to imgarea.class.
rename README.CLA to readme.class.
Note: class names has to be lower case.
At this time, you should have following files in c:\tmp
coolmap.class
common.class
hintpot.class
imgarea.class
readme.class
TEST_CM.HTM
USA_MAP.GIF
LAUGH.AU
SOUND15.AU
SOUND21.AU
4). Open TEST_CM.HTM with your browser locally. If it works locally,
go to next step. Otherwise, go to step B) below.
5). Try TEST_CM.HTM online.
- place coolmap.class and common.class in your HTML directory, say public_html,
in your server. (FTP program may change coolmap.class to coolmap.cla. Rename class files as needed
and rename COMMON.CLA to common.class. Note: class names has to be lower case. ).
Be sure that you set the file format to BINARY when you FTP class files
while set file format to ASCII or TEXT when you FTP html files
- place TEST_CM.HTM and SOUND*.AU to public_html
- change access attributes of all the files above to readable using following
Unix commands
chmod 744 ~/public_html/coolmap.class
chmod 744 ~/public_html/common.class
chmod 744 ~/public_html/hintpot.class
chmod 744 ~/public_html/imgarea.class
chmod 744 ~/public_html/readme.class
chmod 744 ~/public_html/TEST_CM.HTM
chmod 744 ~/public_html/USA_MAP.GIF
chmod 744 ~/public_html/LAUGH.AU
chmod 744 ~/public_html/SOUND15.AU
chmod 744 ~/public_html/SOUND21.AU
- NOTE: File names are case sensitive if you are using an Unix server.
- Browse the TEST_CM.HTM in your server from your local machine remotely.
If it works, go to next step. Otherwise, go to step B) below.
6). Use your stuff in TEST_CM.HTM. Replace following part of TEST_CM.HTM
<param name=mapImage value="USA_MAP.GIF">
with your stuff, say
<param name=mapImage value="your_map.gif">
where
your_map.gif - your iamge map file
If it works, go to next step. Otherwise, go to step B) below.
7). Insert the applet to your page, say YOURS.HTM. Copy-paste following part of TEST_CM.HTM
to the place you want in YOURS.HTM
<applet code="coolmap.class" width=900 height=500>
<param name=mode value="Map">
<param name=imageWidth value="350">
<param name=imageHeigth value="300">
<param name=hintWidth value="150">
<param name=fontHeight value="11">
<param name=mapImage value="your_map.gif">
<param name=hot_area1 value="http://www.coolshare.com,LAUGH.AU,0,0, No_Title,7,67,30,74,27,102,46,141,50,146,51,152,52,158,47,170,32,168,30,159,19,147,13,144,12,135,8,122,9,118,5,103,2,94,4,86,3,80,8,69,California - A golden state!!">
<param name=hot_area2 value="http://www.coolshare.com,SOUND15.AU,0,0, No_Title,274,195,283,218,289,237,287,246,274,238,267,223,261,210,255,206,248,210,239,205,230,205,230,199,240,197,249,198,269,197,273,194,Florida - The place where you can relex ...">
<param name=hot_area3 value="http://www.coolshare.com,SOUND21.AU,0,0, No_Title,18,1,26,11,31,6,119,27,177,29,202,37,216,27,228,34,238,49,257,50,263,57,258,61,255,78,248,87,269,76,269,67,285,62,308,46,316,21,326,21,333,37,348,25,339,6,340,0,21,0,Canada - Our nice neighbour.">
</applet>
Browse YOURS.HTM in your server.
If it works, go to next step. Otherwise, go to step B) below.
8). Place resource files to a sub-directory, say resource, using
following Unix commands:
mkdir ~/public_html/resource
chmod 755 ~/public_html/resource
mv ~/public_html/your_map.gif ~/public_html/resource
Change the corresponding reference in YOURS.HTM to match your change:
<param name=mapImage value="resource/your_map.gif">
Browse the page in your server.
You can use shareware such as PaintShop to edit your own gif images.
You may want to edit your own AU files using shareware like COOLEDIT.
Be sure that you try the minimum quality first: Mono, 8 bit, 8000Khz Sample rate. You can also
convert a MIDI file to AU using CSound in order to play it with this applet.
If it works, go to next step. Otherwise, go to step B) below.
9).Use the built-in Design Center in CoolMap to create your own image map:
a). Set parameter mode in you HTML script that call CoolMap to Design. Then run the script with a browser
b). Select the Edit mode in Mode section.
c). Point your mouse cursor to a point where you like to use as the first point of the hot area. Press left
mouse button and drag to the second point. Then release mouse button.
d). Click at next point.
e). Repeat step 4 until you finished all the points which limit the hot area.
f). Edit content of tooltips.
g). Edit URL address. This URL will be opened when the hot area is clicked.
h). Select an audio file for the hot area. This audio file will be played when mouse cursor moves over the hot area.
i). Click at button label 'Click When Done Edit'.
j). Click at button label 'Generate HTML Script'.
k). Select the content in the text area at the bottom label 'HTML Script' using mouse
l). Select Edit and Copy from the pull-down manu of broser to copy the HTML script to clipboard.
m). Paste the content of clipboard to an empty text file named, say test.htm. Then browse test.htm with your browser.
If you see what you want, insert the HTML script to YOURS.HTM.
Done!! Easy and quickly done!!
Browse YOURS.HTM in your server.
If it works, go to next step. Otherwise, go to step B) below.
10). Congraduation!! Do Mark a favor: let him know you did it!!
Enjoy it !! (Don't forget to BOOKMARK this page so that you can update it shortly:
Ad will be upgraded frequently).
B). Contact Mark Qian.
Please describe
- which step you have reached
- the errors you get in details(If you use Netscape, click at menu item
Option | Show Java Console and copy-paste-EMail the content there to Mark).
- If you have rearched step 5 or later, run following Unix commands to save
access attribute infor into a file, say tttt
cd ~/public_html
ls -l coolmap.class > tttt
ls -l common.class > tttt
ls -l hintpot.class > tttt
ls -l imgarea.class > tttt
ls -l readme.class > tttt
ls -l LAUGH.AU >> tttt
ls -l SOUND15.AU >> tttt
ls -l SOUND21.AU >> tttt
ls -l TEST_CM.HTM >> tttt
Then, EMail file tttt to Mark Qian so that he can ensure if all the file attributes are setup OK.
To learn how to place a Java applet into your page,
please go to this page and select "How to Add Java Applet to Your Site"
at the bottom of the page.
