Kimler Adventure Pages (http://randsco.com)

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

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)

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.