Rated WebApplet by JARS

CoolMap

-- AdWare(F3.0) and Shareware(V3.0)--

Last Updated:

   10/9/1996 - Added Cross-Frame Page opening capability
   9/17/1996 - Added Functions available for Live-Connect  
   4/3/1998 - some bugs were fixed
Price info of shareware version is available.

The sub-window below demostrates how Coolmap can be used as a toolbar and how it is used crossing frames, windows...Click to try it.



CoolMap is running in Map Mode:

(You will eventually show your visitors the image map on your page in this mode)





CoolMap is running in Design Mode:

(You create your image map in this mode.  In this mode, you use Coolmap to generate a HTML script
which calls itself in Map mode).



Why not try the Design Center above RIGHT NOW and RIGHT HERE?!

(Click at button labeled "Read Me First" above to see instructions 
 and click at button labeled "Edit" to start edit your own Hot Area
 ...change tooltips, URL...You can try(enter one of them into the
 "audio file" field above) following sound files in my site:
 html/sound/SOUND0.AU, 
 html/sound/SOUND1.AU, 
 ..., 
 html/sound/SOUND22.AU.

 Then click at button labeled "Test" to see what you have done.)
 

What else can you use Coolmap for?



  • Toolbar

    (see the sub frame below)
  • 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.
    
    New features 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.
                     
                
    IMPORTANT:
    
    *********  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.  Important: 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. 
    
    
    
           
    
    

    Here are more HOT Stuff! Don't miss them!!!




    You are welcome to ADD 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.  ).
    
                  

    VERY IMPORTANT !!!

    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.







    More Applets are available.



    
    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.