w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

img client-side image map vs. server-side image map

ismap vs usemap

The difference between: a client-side image map AND a server-side image map :
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
the value of its name attribute is the value of the usemap attribute on img element, preceded by #
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
img intro img optional img occurrences img browser display img parents img syntaximg alt attributeimg ismap attributeimg usemap attributeimg width, height attributesimg src attributeimg accesskey attributeimg class attributeimg draggable attributeimg hidden attributeimg id attributeimg lang attributeimg style attributeimg tabindex attributeimg title attributeimg translate attribute