Validating a PSP7 Image Map
The problem with Paint Shop Pro 7s image map generator, along with most click and drag/WYSIWYG editors, is that the code it generates is untidy and generally not valid to any published standards. This tutorial will show you how to clean up your image maps so that they validate as per the XHTML Strict doctype standards. Let's take a look at our code as it stands:
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Jem">
<META NAME="Generator" CONTENT="Jasc Paint Shop Pro 7">
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG NAME="Image10" SRC="Image1.gif" WIDTH="180" HEIGHT="55" BORDER="0" USEMAP="#Image1">
<MAP NAME="Image1">
<AREA SHAPE="rect" COORDS="12,8,75,38" HREF="mailto:jem@jemjabella.co.uk">
<AREA SHAPE="rect" COORDS="104,5,161,40" HREF="http://www.jemjabella.co.uk">
</MAP>
</BODY>
</HTML>
First things first you need to add the XHTML Strict doctype. This goes at the very top of the page, before any other coding:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
We now need to alter the <HTML> tag — first, to make it lower case, and secondly to add the XML name space attribute and document language. So, replace <HTML> with:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
The next step is to make all of your tags and attributes lowercase. You can do this by hand, or you can use the lowercase converter I've made especially. (Note: do not copy the doctype into the lowercase converter — this needs to remain in the correct case as above.)
After you've done that, we need to close all of the tags that are self-closed with XHTML: in this case, <meta>, <img> and <area>. So, we'll take our current meta tags by adding a forward slash before the final >:
<meta name="author" content="jem" /> (repeat for each)
..and the same for our image:
<img name="image10" src="image1.gif" width="180" height="55" border="0" usemap="#image1" />
..and area tags:
<area shape="rect" coords="104,5,161,40" href="http://www.jemjabella.co.uk" /> (repeat for each)
Next you need to work with your attributes. Certain presentational attributes have been deprecated under XHTML and they need to removed. Presentational attributes are attributes that control how elements on the page look — in this case, we have the following presentational attributes in our img tag (width="180" height="55" border="0", although the value of the width and height will vary) which can be removed. This leaves our img tag like so:
<img name="image10" src="image1.gif" usemap="#image1">
After having removed the presentational attributes, you need to add the alt attribute to our img and area tags — this allows screen reader users to navigate using our image map (and helps us validate). For advice on alt attributes, read Gemma's article on Using alt Text and Long Image Descriptions. The last thing you need to do with your attributes is to remove the pointless name attribute from our img tag, and add an id attribute to your <map> to match the name attribute (to ensure backwards and forwards compatibility) like so:
<map name="image1" id="image1">
Last but not least, because our image map and associated 'stuff' are inline elements you need to wrap the lot in a block level element — a <div> out of preference. Put your opening <div> just before the <img /> and the closing </div> after </map>. Our coding is now valid, and should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="author" content="jem" />
<meta name="generator" content="jasc paint shop pro 7" />
<title> </title>
</head>
<body>
<div>
<img src="image1.gif" usemap="#image1" alt="links" />
<map name="image1" id="image1">
<area shape="rect" coords="12,8,75,38" href="mailto:jem@jemjabella.co.uk" alt="email" />
<area shape="rect" coords="104,5,161,40" href="http://www.jemjabella.co.uk" alt="website" />
</map>
</div>
</body>
</html>
Tags:
psp7, image-map, html,
Last Updated On: 27th May 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources