Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
Posting a valid XHTML 1.0 (Strict) ImageMap
EDIT: If you want an XHTML 1.1 valid image map, read these this article.
Note: This article fails once again passes validation because it is written to XHTMLv1.0 (Strict) standards and our pages are now used to be validating against XHTMLv1.1. (Update: I got tired of our website failing in FireFox, using XHTMLv1.1, whenever code had a simple tag typo. We just fell back to using v1.0 Strict, once again.)
If you move your mouse over the image on the right, in the lightened area, you'll see a "hotspot" there. If you click on this hotspot, this page will open into the Adidas running shoes homepage. (Use the browser 'back' button to return, if you would like to see what the Adidas homepage looks like.) THIS is a simple example of an "image map", where a certain area of an image is linked to another page & clicking it will take the visitor to that page. It's a simple example because there is only one "hot spot" on the image and it is rectangular in shape. One can have many hot spots and the shapes can be highly irregular.
Recently, someone on the b2evolution forums asked about posting such an animal in b2evolution - see the original discussion. As it turns out, it's very straight forward, but one has to modify the _formatting.php file so that the html-checker will recognize the code (which isn't as straight forward).
This tutorial provides xhtml(strict)-valid code and shows you what needs to be modified in the /conf/_formatting.php file.
Code for Blog Entry
<map name="MapName" id="MapName"> <area shape="rect" coords="14,123,197,223" href="http://nike.com" alt="hotspot"></area> </map> <img src="http://www.yoursite.com/imagemap.jpg" style="width:400px; float:left; border:1px solid #369;" usemap="#mapName" alt="image" />
Just cut-n-paste the code into your blog entry, change the items highlighted in green. You can't yet SAVE your entry, because the b2evolution "html-checker" will get its panties all in a ruffle.
You will need to make the following changes to the /conf/_formatting.php file, so that the "html-checker" will allow the code tags and attributes: (You must do the changes highlighted in blue)
* Allowed Entity classes
define('E_special_extra', 'img map' ); // Transitional
// Array showing what tags are allowed and what their allowed subtags are.
$allowed_tags = array
'img' => '',
'map' => 'area',
'area' => E_block.'',
'fieldset' => '#PCDATA legend '.E_block.' '.E_inline.' '.E_misc,
// Array showing allowed attributes for tags
$allowed_attribues = array
// 'img' => A_attrs.' src alt longdesc height width usemap ismap', // Strict
'img' => A_attrs.' style src alt longdesc usemap ismap onmouseover onmouseout', // Transitional
'map' => A_attrs.' name id',
'area' => A_attrs.' shape coords href alt',
// Array showing URI attributes
$uri_attrs = array
// 'usemap', // Commented out for adding usemap="#MapName" hotspot URI
Save the new _formatting.php file and upload it over the existing one on your server. Once this is done, you should be able to save your entry without any difficulty & the imageMap should work in your blog.
That's it. Hope you find this useful.