This applet enables searching for text elements in a hierarchically organized set of images. Also enables hotlinks for the text elements. The search feature is achieved by providing the pixel coordinates of the text elements in a text file.
- Browsing an Image
- The main image used in this example is imageExplorer.gif.
- Browse the image by arbitrarily dragging it with the mouse after enabling the "Translate" checkbox. The "Translate" checkbox is 'on' by default.
- Browsing Hierarchically Organized Images
- In this example we have also loaded two additional images, cafeteria.gif and cantmenu.gif where cafeteria.gif is an exploded view of the "CAFETERIA" region of the main image, and cantmenu.gif is an exploded view of the "CANTONESE" region of cafeteria.gif.
- Double-clicking on "CAFETERIA" in the main image will open an enlarged view of that region by loading cafeteria.gif. Double-clicking on "CANTONESE" in cafeteria.gif will open cantmenu.gif.
- Use the "Back" button to load the previous image. Use the "Reset" button to reset the current image. Use the "Home" button to reset the applet.
- Searching for Text Elements in the Images
- Search for text elements in the image. The search is case insensitive. Use the "reset" button before starting a search with a new string. To search for the next occurrence of the same string click on the search button consecutively. In this demo applet the text elements "BOOTH 100", "BOOTH 200", "BOOTH 300", "BOOTH 400", "BOOTH 500" and "CAFETERIA" are search enabled.
- The search strings listed in imagExplorer3.txt can be longer than the corresponding strings in the image. For instance, "booth 400" occurs in the image but we search-enable it as as "booth 400, Gigabit Ethernet" in the text file. Searching for "giga" will return "booth 400".
- Strings that appear in images that are lower in the hierarchy can also be searched. For instance, searching for "chicken" when imageExplorer.gif is on will return "CAFETERIA". Double-click on this region to load cafetria.gif and then hit the search button which will return "CANTONESE". Finally, double-clicking on this region loads cantonesemenu.gif that contains the string "chicken".
- The search result is undefined when a search string occurs in the parent image of the current image.
- Hotlinking Text Elements on the Image
- If hotlinks are defined for any of the text elements a rectangular "highlight box" will appear when the mouse pointer is moved over the strings. Since a hotlink is not defined for "BOOTH 101" the highlight box will not appear for this region.
- Double-clicking on hotlinks on the image opens the corresponding document. A target window for this document can be specified through the applet param TARGETFRAME. If the hotlink is an image then it is loaded in the current applet. In this demo applet the text elements "BOOTH 100", "BOOTH 200", "BOOTH 300","BOOTH 400", and "CAFETERIA" are hotlinks.
- Drawing Strings on the Images
- The applet can, optionally, also draw selected strings listed in the text file on the image. In our example, the strings "booth 101", "booth 102", "booth 103" and "booth 104" are drawn on the image. The last field of each line in the text file specifies this drawing option.
- "Centering" a Text Element of the Image
- Optionally, the applet can also "center" a text element when it is accessed for the first time. A demo of this feature can be seen by clicking on the "Where am I?" link just above the applet.
To handle a bug in IE3.0 Where am I?
To handle a bug in IE3.0 If you are interested in testing this applet locally:
- Download imgexp3.html, imgexp3_try.class, imgexp3_tryRec.class, imgexp3_try.txt, urhere3.html and urhere3.txt all in one directory. All the files required for this example can also be downloaded as imgexp3_try.zip
- Add an image file by name imageExplorer.gif to this directory.
- Edit imageExplorer.txt to conform to the image file.
- Each line of the text file looks like:
"imageExplorer.gif":"booth 100":160:167:"booth100info.html":0which has six fields separated by ':'.
- The first field("imageExplorer.gif") refers to the image.
- The second field("booth 100") refers to the search string.
- The third and fourth fields(160 and 167) refer to the pixel coordinates on the image that corresponds to "booth 100".
- The fifth field("booth100info.html") referes to the URL of the document that needs to be opened when the image is double-clicked in the search region (160,167). If there is no URL to be specified for any text element, specify a zero length string ("").
This field can alternatively specify another image name.
- The sixth field(0 or 1) specifies whether the string ("booth 100") needs to be drawn on the image. When this field is zero the string is not drawn.
- The dimensions and color of the hotlink window can be altered using the PARAM value in the file imageExplorer3.html. The text file name can be specified through the param value.
- You'll be able to test upto 20 hotlinks with these files. The registered version can have any number of hotlinks.
- If you are using Netscape Communicator 4.05 to test the applet locally and if you have downloaded the applet to a directory C:\test then you need to edit the applet tag to add codebase="file:///C:/test/" and replace "imgexp3_try.txt" with "file:///C:/test/imgexp3_try.txt".