| [ WWW ] in KIDS 글 쓴 이(By): jaslee (이준석) 날 짜 (Date): 1995년07월07일(금) 13시03분12초 KDT 제 목(Title): re : imagemap 안녕하세요 저도 어렵게 알아 낸것을 가르쳐 드리니 기뻐요. hoohoo 어디서 받아왔는데 부면 쉽게 알 수 있을 거여요 NCSA IMAGEMAP TUTORIAL _________________________________________________________________ Eternal gratitude to Kevin Hughes, kevinh@pulua.hcc.hawaii.edu, for his code to find intersections of points with circles and polygons. This is a new imagemap.c file that has advantages over the old one. Note: The new imagemap.c is backward compatible. This document is a step-by-step tutorial for designing and serving graphical maps of information resources with new imagemap.c. Through such a map, users can be provided with a graphical overview of any set of information resources; by clicking on different parts of the overview image, they can transparently access any of the information resources (possibly spread out all across the Internet). _________________________________________________________________ What you need This tutorial assumes use of NCSA httpd (version 1.0a5 or later). Some other servers (e.g. Plexus) can also serve image maps, in server-specific ways; see the specific server's docs for more information. Make sure you have a working NCSA httpd server installed and running. This tutorial also assumes use of NCSA Mosaic for X version 2.0. Other clients that support inlined GIF images and HTTP/1.0 URL redirection will also work. _________________________________________________________________ Compile the imagemap script If you downloaded the new imagemap.c, you need to compile the imagemap script.Do this by first cd'ing into your ServerRoot, and then cd into the cgi-src subdirectory. Put the new imagemap.c source in place of the old one(if you ha ve old version of imagemap.c) and then, type make imagemap and you should be all set. _________________________________________________________________ Your First Image Map In this section we walk through the steps needed to get an initial image map up and running. NCSA Imagemap Tutorial (p4 of 13) First, create an image. There is a program called mapedit that you could use. There are a number of image creation and editing programs that will work nicely -- the one I use is called xpaint (you can find it on ftp.x.org in /R5contrib; here's the tar file). The important thing is that the image ends up in GIF format. Second, create an Imagemap Configuration file. This file maps regions to URLs for the given image. A common scheme for an imagemap is a collection of points, polygons, rectangles and circles, each containing a short text description of some piece of information or some information server; interconnections are conveyed through lines or arcs. Try to keep the individual items in the map spaced out far enough so a user will clearly know what he or she is clicking on. NCSA Imagemap Tutorial (p5 of 13) Lines beginning with # are comments. Every other non-blank line consists of the following: method url coord1 coord2 ... coordn coord are each coordinates, format x,y. The number depends on method. * default For the default Url. Coordinates: none * circle For a circle. Coordinates: center edgepoint * poly NCSA Imagemap Tutorial (p6 of 13) For a polygon of at most 100 vertices. Each coordinate is a vertex. * rect For a rectangle. Coordinates: upper-left lower-right * point For closest to a point. Coordinate: thePoint url is one of the following: * a virtual pathname to a file on your server (i.e. a URL to your server without the http://hostname part) * a URL Notes: * each method is evaluated in the order it is placed in the configuration file. If you have overlapping areas, such as a circle inside of a rectangle, you should place whichever one you NCSA Imagemap Tutorial (p7 of 13) want evaluated first before the other in the map file. In this case, we would put the circle before the rectangle. * Also note that it does not make sense to use the default method with the point method because if even one point method is specified, anywhere you click will be considered close to the point and the URL specified by point will be serviced. Here is an example image map linked from Mosaic Demo page. Here is what an imagemap configuration file looks like: default /X11/mosaic/public/none.html rect http://cui_www.unige.ch/w3catalog 15,8 135,39 rect gopher://rs5.loc.gov/11/global 245,86 504,143 - NCSA Imagemap Tutorial (p8 of 13)rect http://nearnet.gnn.com/GNN-ORA.html 117,122 175,158 The format is fairly straightforward. The first line specifies the default response (the file to be returned if the region of the image in which the user clicks doesn't correspond to anything). Subsequent lines specify rectangles in the image that correspond to arbitrary URLs -- for the first of these lines, the rectangle specified by 15,8 (x,y of the upper-left corner, in pixels) and 135,39 (lower-right corner) corresponds to URL http://cui_www.unige.ch/w3catalog. So, what you need to do is find the upper-left and lower-right corners of a rectangle for each information resource in your image map. A good tool to use for this is xv (also on ftp.x.org in /contrib) -- pop up the Info window and draw rectangles over the image with the middle mouse button. It doesn't matter where you put your map configuration file or what you name it. For the purposes of this example, let's assume it's called /foo/sample.map. Third, referencing your imagemap in your HTML file. To reference your new map, you construct URLs pointing to it. For example, if you have created a example.map file in the directory called path in your public_html home directory, and used the image sample.gif for the map, the following line of HTML will reference it: <A HREF="http://foo.edu/cgi-bin/imagemap/~username/path/example.map"> <IMG SRC="sample.gif" ISMAP> </A> Fourth, try it out! Load the HTML file, look at the inlined image, click somewhere, and see what happens. _________________________________________________________________ Subsequent Image Maps You can serve as many image maps from a single server as you want. Just add lines to conf/imagemap.conf pointing to each image map file you create. _________________________________________________________________ _________________________________________________________________ The fish demo in another section of this manual used the following configuration files: MAP CONFIGURATION FILE The map configuration file used for this picture was rather lengthy. I used xv to get the coordinates. REFERENCE THE MAP IN HTML DOCUMENT: <A HREF="/cgi-bin/imagemap/fish"><IMG SRC="fish33.gif" ISMAP> <A> _________________________________________________________________ Real-World Examples Following are examples of distributed image maps on servers in the real world; they may or may not work at any point in time. * Experimental Internet Resources Metamap at NCSA. * University of California Museum of Paleontology. * National Institute of Standards and Technology. * Server map at NCHPC Information Server. _________________________________________________________________ For More Information For more information, see the NCSA httpd documentation. _________________________________________________________________ [Back] Return to the tutorial index Return to administration overview _________________________________________________________________ NCSA HTTPd Development Team / httpd@ncsa.uiuc.edu / Last Modified 6-13-95 ------------------------------------------------------------------------ Believe in Jesus Christ "I am the way ,the truth, the life " (John 14:6) Whom do you end up with your Life. Please, let it be with Jesus Christ! Jun Seok Lee jaslee@hyowon.cc.pusan.ac.kr http://hyowon.cc.pusan.ac.kr:8000 ------------------------------------------------------------------------ |