img ismap attribute
The ismap attribute on the img element:
- transforms a regular image into an image map by connecting it to a server-side image map (e.g. a .map file)
- ismap is a specific attribute → can be applied ONLY on the next HTML5 element: img
- is an optional attribute
- the parent of an img element having ismap attribute must be the a element
Examples
<img | attribute | = | "value(s)" | > | Examples | ||
---|---|---|---|---|---|---|---|
3. | ismap | = | "", , ismap | <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 |