Today’s Byte is very specific – so I suspect few folks will use it today – but I hope you’ll be able to store away the knowledge until you need it – or that it might inspire you to include a clickable image on an upcoming WordPress post.
Here is a site I’ve been working on: http://arrowheadtransitmn.com/
We wanted to include a clickable map of the areas served in the first post. I created a “hot spot” image using Dreamweaver. (You can learn how to do that here: http://www.dreamweavertutorial.net/tricks/dreamweaver-cs3-image-hotspots/.) Unfortunately simply cutting and pasting the html from Dreamweaver did not work. But the solution was simple. I just shifted one line of code. I’ll paste the Dreamweaver version vs what I used in WordPress below – and I’ll highlight in bold the line I moved.
From Dreamweaver:
<table width=”276″ height=”38″ border=”0″ align=”right”>
<tr>
<td></p>
<img src=”http://arrowheadtransitmn.com/wp-content/uploads/2010/04/regionBlueGray.gif” alt=”Arrowhead” width=”250″ height=”287″ border=”0″ usemap=”#Map” /></td>
</tr>
</table>
<p> </p>
<map>
<area shape=”rect” coords=”58,50,106,93″ href=”http://arrowheadtransitmn.com/schedules-by-county/koochiching-county/” alt=”Koochiching” />
<area shape=”rect” coords=”59,94,104,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/itasca-county/” alt=”Itasca” />
<area shape=”rect” coords=”77,145,107,197″ href=”http://arrowheadtransitmn.com/schedules-by-county/aitkin-county/” alt=”Aitkin” />
<area shape=”rect” coords=”109,157,139,194″ href=”http://arrowheadtransitmn.com/schedules-by-county/carlton-county/” alt=”Carlton” />
<area shape=”rect” coords=”108,52,155,159″ href=”http://arrowheadtransitmn.com/schedules-by-county/saint-louis-county/” alt=”St Louis” />
<area shape=”rect” coords=”155,75,185,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/lake-county/” alt=”Lake” />
<area shape=”rect” coords=”185,70,243,125″ href=”http://arrowheadtransitmn.com/schedules-by-county/cook-county/” alt=”Cook” />
</map>
</td>
</tr>
</tbody>
</table>
Into WordPress:
<table style=”height: 38px;” border=”0″ width=”276″ align=”right”>
<tbody>
<tr>
<td><map name=”Map”>
<area shape=”rect” coords=”58,50,106,93″ href=”http://arrowheadtransitmn.com/schedules-by-county/koochiching-county/” alt=”Koochiching” />
<area shape=”rect” coords=”59,94,104,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/itasca-county/” alt=”Itasca” />
<area shape=”rect” coords=”77,145,107,197″ href=”http://arrowheadtransitmn.com/schedules-by-county/aitkin-county/” alt=”Aitkin” />
<area shape=”rect” coords=”109,157,139,194″ href=”http://arrowheadtransitmn.com/schedules-by-county/carlton-county/” alt=”Carlton” />
<area shape=”rect” coords=”108,52,155,159″ href=”http://arrowheadtransitmn.com/schedules-by-county/saint-louis-county/” alt=”St Louis” />
<area shape=”rect” coords=”155,75,185,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/lake-county/” alt=”Lake” />
<area shape=”rect” coords=”185,70,243,125″ href=”http://arrowheadtransitmn.com/schedules-by-county/cook-county/” alt=”Cook” />
</map>
<img usemap=”#Map” src=”http://arrowheadtransitmn.com/wp-content/uploads/2010/04/regionBlueGray.gif” border=”0″ alt=”map of Arrowhead” width=”250″ height=”287″ /></td>
</tr>
</tbody>
</table>
Just remember to add the code into the HTML face of WordPress.
Byte of the Week 
