w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

img ismap attribute

The ismap attribute on the img element:


<imgattribute="value(s)" >Examples
3.ismap="",  , ismap<img src="sitemap.jpg" alt="image description" ismap>

Video demonstration img ismap attribute

HTML5 img ismap attribute Tutorial

min video details
00:01 video demo server-side image map
ismap attribute on img
xampp v.1.8.0 apache server v2.4
00:07 ismap attribute on img element transforms a regular image into an image map by connecting it to a server-side image map (e.g. a .map file)
00:13 facts:
00:13 all these files have been uploaded on server, inside htdocs directory, in a folder called ismap
00:33 the index.php file contains the img element nested inside a element
00:38 treasure_map.jpg is the embedded image through img element
00:48 sample_map is the file that holds the coordinates of the clickable areas of the image treasure_map.jpg
01:18 start Apache
01:25 access the ismap folder on server
01:32 test
01:33 not ok: instead of being taken to round_zone.php file, the content of the sample.map file displays
01:46 important checkings:
01:46 inside httpd.conf file, the mod_imagemap module must be enabled
02:09 restart the server
02:24 test
02:27 still doesn't work
02:30 the corresponding handler for the .map file must be added inside the .htaccess file
02:54 not ok yet: the image does not act like an image map
02:59 reopening index.php file form ismap folder on server
03:09 add the ismap attribute to img element
03:20 test
03:22 test result: ok
03:29 reminder:
1. mod_imagemap must be enabled
2. add handler ⁄ MIME type for the .map file
3. add ismap attribute on img tag
4. to define coordinates in sample.map, see Module "mod_imagemap" on httpd.apache.org
img intro img optional img occurrences img browser display img parents server-side image map (ismap) vs client-side image map (usemap) img syntaximg alt 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