img client-side image map vs. server-side image map
ismap vs usemap
| The client-side image map: | The server-side image map: |
|---|---|
| 1. Required attribute | 1. Required attribute |
| usemap="#value" | ismap |
| 2. Required element | 2. Required element |
| map the value of its name attribute is the value of the usemap attribute on img element, preceded by # | a |
| 3. Defining coordinates | 3. Defining coordinates |
| inside area element, child of a map element | inside a .map file, whose MIME type ⁄ Handler must be added on Server inside .htaccess file like this: AddType application/x-httpd-imap map (for Apache - old versions) OR AddHandler imap-file map (for Apache - new versions) |
| NOTE: there's a difference between the way the coordinates are defined inside area element vs .map file ! See Apache Module mod_imagemap on httpd.apache.org | |
| 4. Processing coordinates | 4. Processing coordinates |
| in Browser | on Server: inside httpd.conf file, make sure Apache's module mod_imagemap is enabled |
| 5. @ mouse over clickable areas | 5. @ mouse over clickable areas |
| destination link | file.map?Xcoordinate,Ycoordinate |
| 6. tooltip | 6. tooltip |
| yes, through title attribute | no tooltip |
| Example: see the video tutorial below | |
Video demonstration img attributes: usemap vs. ismap
usemap(client-side: BROWSER) vs. ismap(server-side: SERVER)
| min | video details |
|---|---|
| 00:02 | client-side image map versus server-side image-map video demo |
| 00:08 | common resources |
| 00:12 | the same image will be used in both cases: as client-side image map and then as a server-side image map |
| 00:24 | Differences: |
| 00:24 | 1. attributes |
| 00:24 | client-side uses usemap server-side uses ismap |
| 00:32 | 2. required element |
| 00:32 | client-side: requires map element server-side: requires a element |
| 00:37 | the value of the name attribute of map element represents the value of the usemap attribute from img element, preceded by hash |
| 00:46 | 3. defining coordinates |
| 00:32 | client-side: inside area element server-side: inside .map file, value of href attribute of a element: that a element, parent of img element which ismap |
| 00:35 | differences in defining coordinates, shapes, links in both cases: client-side image map ⁄ server-side image map |
| 01:25 | on Apache web server, a .map file will be treated as imagemap file ONLY if the corresponding MIME type ⁄ Handler is added inside .htaccess |
| 01:42 | 4. processing coordinates |
| 01:42 | client-side: in Browser server-side: on Server |
| 01:59 | note: the coordinates could not be processed by the Browser, we need to test it form the Server |
| 02:22 | test result: ok from Server |
| 02:42 | for server-side image maps, on Server, make sure the Module mod_imagemap is enabled, file httpd.conf (if using XAMPP, remove the #) |
| 03:03 | 5. @ mouse over the clickable areas |
| 03:03 | client-side: destination link server-side: file.map?XcoordinateYcoordinate |
| 03:40 | 5. @ mouse over tooltip |
| 03:40 | client-side: tooltip displays, through title attribute server-side: no tooltip |
| 03:55 | if no special reason of using server-side image maps, use a clinet-side image maps |