Institute for Visualization and Perception Research 1 © Copyright 1998 Haim Levkowitz Image Maps Introduction... How image maps work... To add a clickable image map to documents... Preparing the NCSA and CERN Servers... Choosing Image File... Creating Image Map and URLs... The CERN htimage Map Format... Figuring Out Coordinates... Installing the Map in a Document... Additional Tricks and Advice... Static vs. dynamic imagemap creation...

Institute for Visualization and Perception Research 2 © Copyright 1998 Haim Levkowitz Introduction... Special form of hyperlink Involving inline image Click on different parts ==> Takes user to different pages Must have imagemap-savvy browser ==> Create fancy graphical inputs Menu bars, interactive street maps, or, e.g., online atlas of anatomy

Institute for Visualization and Perception Research 3 © Copyright 1998 Haim Levkowitz How image maps work... Any server that supports standard CGI scripts can host clickable imagemaps User clicks on inline image... Browser records position of click... Script looks up position of click in table... Script returns redirection directive to browser... Browser retrieves indicated URL and displays

Institute for Visualization and Perception Research 4 © Copyright 1998 Haim Levkowitz User clicks on inline image... Must have ISMAP attribute set in its tag

Institute for Visualization and Perception Research 5 © Copyright 1998 Haim Levkowitz Browser records position of click... Sends to executable script Running on the HTTP server imagemap in NCSA's server htimage in CERN's

Institute for Visualization and Perception Research 6 © Copyright 1998 Haim Levkowitz Script looks up position of click in table... Executable script handles image region lookup Maps diff. regions of image to diff. URLs

Institute for Visualization and Perception Research 7 © Copyright 1998 Haim Levkowitz Script returns redirection directive to browser... W/ name of appropriate URL to fetch

Institute for Visualization and Perception Research 8 © Copyright 1998 Haim Levkowitz To add a clickable image map to documents... First, select appropriate inline image Then, create map file... Last, place in document with tag...

Institute for Visualization and Perception Research 9 © Copyright 1998 Haim Levkowitz Then, create map file... Describe each region of image Assign a URL to it

Institute for Visualization and Perception Research 10 © Copyright 1998 Haim Levkowitz Last, place in document with tag... That contains ISMAP attribute Surround image with hyperlink That points to an imagemap script

Institute for Visualization and Perception Research 11 © Copyright 1998 Haim Levkowitz Preparing the NCSA and CERN Servers... Getting and installing script software... NCSA vs. CERN Identical in functionality Different image lookup table format NCSA server, imagemap script... CERN server, htimage...

Institute for Visualization and Perception Research 12 © Copyright 1998 Haim Levkowitz Getting and installing script software... NCSA vs. CERN Identical in functionality Different image lookup table format

Institute for Visualization and Perception Research 13 © Copyright 1998 Haim Levkowitz Choosing Image File... Graphics formats that can be displayed inline e.g., XBM, GIF Newer browsers: also color JPEG images Image should fit nicely onto page 400 x 300 pixels max ~ More ==> user have to scroll Simple images, e.g., diagrams ==> easier than scanned photographs ==> better clickable maps

Institute for Visualization and Perception Research 14 © Copyright 1998 Haim Levkowitz Creating Image Map and URLs... Need to create map file for image Set of regions that covers the image Each region assigned URL... The imagemap format...

Institute for Visualization and Perception Research 15 © Copyright 1998 Haim Levkowitz Each region assigned URL... Local or elsewhere Returned when user clicks inside imagemap & htimage scripts Use slightly different formats

Institute for Visualization and Perception Research 16 © Copyright 1998 Haim Levkowitz The imagemap format... Define regions of image w/ entries like region-type URL coordinates Region type specifies kind of region... URL: any local or remote... Can point at any document... Coos specified as X,Y (h, v) pairs... Ignore blank lines & lines beg. w/ coms. (#) When imagemap called w/ X,Y coos click in image...

Institute for Visualization and Perception Research 17 © Copyright 1998 Haim Levkowitz Region type specifies kind of region... point: X, Y... rect: TL, BR circle: center, edge pts poly: series of (<= 100) X, Y vertices... default: no region spec'd...

Institute for Visualization and Perception Research 18 © Copyright 1998 Haim Levkowitz point: X, Y... If click not within defined region imagemap select closest defined point If 2 pts equidistant from click Select 1st listed in map file

Institute for Visualization and Perception Research 19 © Copyright 1998 Haim Levkowitz poly: series of (<= 100) X, Y vertices... Closed poly If not closed, imagemap will close

Institute for Visualization and Perception Research 20 © Copyright 1998 Haim Levkowitz default: no region spec'd... Every map should have default / point point has precedence over default

Institute for Visualization and Perception Research 21 © Copyright 1998 Haim Levkowitz URL: any local or remote... Full Partial E.g., /animals/a_tapir.html but NO relative../a_rhinoceros.html

Institute for Visualization and Perception Research 22 © Copyright 1998 Haim Levkowitz Can point at any document... Text Script to execute Sound file to play Any other type of file

Institute for Visualization and Perception Research 23 © Copyright 1998 Haim Levkowitz Coos specified as X,Y (h, v) pairs... Coo. sys. in pixels 0,0: upper left hand corner of image Grow as move down and to right Lists of coo pairs separated by spaces

Institute for Visualization and Perception Research 24 © Copyright 1998 Haim Levkowitz When imagemap called w/ X,Y coos click in image... Opens up map file Works its way from top to bottom … If match is found … If no matches found... If no points are defined … E.g., shoulder.gif...

Institute for Visualization and Perception Research 25 © Copyright 1998 Haim Levkowitz Works its way from top to bottom... Until it finds region that matches

Institute for Visualization and Perception Research 26 © Copyright 1998 Haim Levkowitz If match is found... imagemap returns indicated URL

Institute for Visualization and Perception Research 27 © Copyright 1998 Haim Levkowitz If no matches found... Closest point is returned

Institute for Visualization and Perception Research 28 © Copyright 1998 Haim Levkowitz If no points are defined... default URL chosen

Institute for Visualization and Perception Research 29 © Copyright 1998 Haim Levkowitz E.g., shoulder.gif... Circles, polygons, rectangles, Six regions, A - F Each covers major muscle group Map: when user clicks on muscle ==> Doc w/ info on muscle group No region ==> default document undefined.html map_file_NCSA_imagemap.html shoulder.html

Institute for Visualization and Perception Research 30 © Copyright 1998 Haim Levkowitz The CERN htimage Map Format... Order of elements & format for X,Y coordinate pairs slightly different Format...

Institute for Visualization and Perception Research 31 © Copyright 1998 Haim Levkowitz Format... region-type coordinates URL Valid region types … Coordinates: (X,Y) pairs … URL: any type Blank lines ignored Comments, linebreaks not allowed … map_file_CERN_imagemap.html

Institute for Visualization and Perception Research 32 © Copyright 1998 Haim Levkowitz Valid region types... default: must have; no coos. (def) circle: center (X, Y), radius (circ) rectangle: (TL, BR) or (BL, TR) (rect) polygon: series of (X, Y) vertices (poly) No equivalent of imagemap's point

Institute for Visualization and Perception Research 33 © Copyright 1998 Haim Levkowitz Coordinates: (X,Y) pairs... Parentheses

Institute for Visualization and Perception Research 34 © Copyright 1998 Haim Levkowitz Comments, linebreaks not allowed... Will result in syntax error when execute script

Institute for Visualization and Perception Research 35 © Copyright 1998 Haim Levkowitz Figuring Out Coordinates... Software help Unix... MS-Windows and UNIX: MapEdit … Macintosh: WebMap...

Institute for Visualization and Perception Research 36 © Copyright 1998 Haim Levkowitz Unix... xv or ImageMagick Report position of mouse cursor Won't record to file Have to write positions down

Institute for Visualization and Perception Research 37 © Copyright 1998 Haim Levkowitz MS-Windows and UNIX: MapEdit... Produce imagemap / htimage formats Display GIF image in window Draw polygons, circles, rectangles (no points) After drawing each region Pop up window, prompt for URL Can test out regions as work When done, save map file in either format Can edit map files by hand / in MapEdit

Institute for Visualization and Perception Research 38 © Copyright 1998 Haim Levkowitz How to get... Free for noncommercial use Small fee for commercial users mapedit.html

Institute for Visualization and Perception Research 39 © Copyright 1998 Haim Levkowitz Macintosh: WebMap... Displays images in GIF / Macintosh PICT formats Supports rectangle, polygon & cir No support for points yet Can write regions out in NCSA / CERN formats Can be obtained at:...

Institute for Visualization and Perception Research 40 © Copyright 1998 Haim Levkowitz Can be obtained at:... ap.html

Institute for Visualization and Perception Research 41 © Copyright 1998 Haim Levkowitz Installing the Map in a Document … Find places to store inline image & map Image has to be stored somewhere in document root imagemap ==> map file must also be stored in doc root htimage ==> can store map file anywhere Create link in page where imagemap displayed E.g., "/cgi-bin/imagemap/maps/shoulder.map"...

Institute for Visualization and Perception Research 42 © Copyright 1998 Haim Levkowitz E.g., "/cgi- bin/imagemap/maps/shoul der.map"... ISMAP attribute Tells browser that picture is clickable image map Hypertext link points to the imagemap script … htimage: change name of script...

Institute for Visualization and Perception Research 43 © Copyright 1998 Haim Levkowitz Hypertext link points to the imagemap script... HREF uses "additional path information" Two path names together 1st part --> imagemap script /cgi-bin/imagemap 2nd part: add'l path info Tells script where to find map file maps/shoulder.map All paths relative to document root

Institute for Visualization and Perception Research 44 © Copyright 1998 Haim Levkowitz htimage: change name of script... Also can store map outside document root Give htimage full physical pathname of map Instead of virtual pathname:

Institute for Visualization and Perception Research 45 © Copyright 1998 Haim Levkowitz Additional Tricks and Advice … Trouble getting clickable images to work … Put default statement --> all image maps … Always have to return some URL … For adventure games or mazes … CERN daemon: server's path translation rules … Problems with image maps...

Institute for Visualization and Perception Research 46 © Copyright 1998 Haim Levkowitz Trouble getting clickable images to work... Check permissions & try again User: nobody

Institute for Visualization and Perception Research 47 © Copyright 1998 Haim Levkowitz Put default statement --> all image maps... If leave out & user clicks on region not defined ==> Scripts behave in unpredictable ways

Institute for Visualization and Perception Research 48 © Copyright 1998 Haim Levkowitz Always have to return some URL... Even when user clicks in blank area ==> Have default directive point to "do nothing" script Returns status code 204 to browser Code means "no response" Tells browser to stay on current page Do nothing scripts are most common "nph" scripts

Institute for Visualization and Perception Research 49 © Copyright 1998 Haim Levkowitz For adventure games or mazes... Don't want users peeking at text of map file Find name w/ "view source" on browser W/ htimage Can store map file outside document root In server root or elsewhere With either script Make directory holding maps inaccessible Server's protection facilities

Institute for Visualization and Perception Research 50 © Copyright 1998 Haim Levkowitz CERN daemon: server's path translation rules... Shorthand to refer to map scripts & files In httpd.conf: line like Map/img/*/cgi-bin/htimage/pictures/maps/* ==> Translate URLs w/ /img --> /cgi bin/htimage/pictures/maps ==> Simplify previous example to Don't use shorthand that collides with real document path

Institute for Visualization and Perception Research 51 © Copyright 1998 Haim Levkowitz Problems with image maps... May have encountered one of several bugs in CERN & NCSA

Institute for Visualization and Perception Research 52 © Copyright 1998 Haim Levkowitz Static vs. dynamic imagemap creation … So far: static … Dynamic...

Institute for Visualization and Perception Research 53 © Copyright 1998 Haim Levkowitz So far: static... Create (GIF) image Store in file Create imagemap Inefficient usage of files

Institute for Visualization and Perception Research 54 © Copyright 1998 Haim Levkowitz Dynamic... Invoke program Get back some HTML E.g.,

Institute for Visualization and Perception Research 55 © Copyright 1998 Haim Levkowitz E.g.,... SRC points back to program (instead of.gif file) ==> Program invokes itself Return image