Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
XHTML-Strict ImageMap
Posting a valid XHTML 1.0 (Strict) ImageMap
EDIT: If you want an XHTML 1.1 valid image map, read these updated instructions (Though the b2evo _formatting.php edits, covered here, still apply.)
Note: This article fails validation because it is written to XHTMLv1.0 (Strict) standards and our pages are now validating against XHTMLv1.1
I've left this post up for people that are still validating agains the v1.0 (Strict) standard, as the methods still apply.

Concept
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" />
The HTML-checker
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
(
.
.
.
'archive',
// 'usemap', // Commented out for adding usemap="#MapName" hotspot URI
'longdesc',
Implementation
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.






















Boy did i roll round laughing when i noticed that after guffing yourself up with all this hyperbole (and the links to the so-called xhtml1.1strict maps), neother of your pages actually validated with w3c due to your map....
8-)
You've completely missed the point.
THIS article fails XHTML v1.1 validation b/c it's written against OLDER standards (XHTML v1.0 Strict).
This is all explained in the newer article (and too, why the newer article fails in "full-view" mode as well). Have a closer read.
If you validate this page, you'll see the XHTMLv1.1 image validates just fine.
-stk
Auight, peace...