Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

search cloudRandom Searches
random top 40

XHTML-Strict ImageMap

Filed in:b2evo

XHTML-Strict ImageMap

April 6th, 2005  · stk

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.)

 hotspot: clicking takes you to image


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="" alt="hotspot"></area> </map> <img src="" 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
// '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.

Views: 43664 views
5 Comments · GuestBook
default pin-it button
Updated: 3-Dec-2009
Web View Count: 43664 viewsLast Web Update: 3-Dec-2009

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.

Subscribe to Comments

Auto convert line breaks to <br />

1.flag Thomas Comment

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....

2.flag stk Comment

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. ;)

3.flag Righteous One Comment
Yo Thom-ass, you've not only missed the point but you can't spell or use spell checker effectively - this is how to spell "neither " not neother.

Auight, peace...
4.flag Mr. Waters Comment
I think Thomas was pointing out the irony of the page not validating.

It should be noted the page doesn't validate any more as HTML5.

Also, attack of the spelling nazis: "Auight" is spelt "Alright", no?
5.flag stk Comment
Mr Waters,

Thomas wasn't only mean-spirited, he also failed to comprehend the reason why the article didn't validate to XHTMLv1.1 standards.

FWIW - none of our pages validate any longer b/c we've recently adopted an HTML5 DOCTYPE and the W3C Validation for this DOCTYPE is experiemental.

IMO, both "alright" and "all right" are accepted. I believe that "all right" is historically the preferred spelling, but in recent years "alright" is becoming the preferred spelling.