Web Developer Tools

clickable image on WordPress image

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&#8221; alt=”Arrowhead” width=”250″ height=”287″ border=”0″ usemap=”#Map” /></td>

</tr>

</table>

<p>&nbsp;</p>

<map>

<area shape=”rect” coords=”58,50,106,93″ href=”http://arrowheadtransitmn.com/schedules-by-county/koochiching-county/&#8221; alt=”Koochiching” />

<area shape=”rect” coords=”59,94,104,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/itasca-county/&#8221; alt=”Itasca” />

<area shape=”rect” coords=”77,145,107,197″ href=”http://arrowheadtransitmn.com/schedules-by-county/aitkin-county/&#8221; alt=”Aitkin” />

<area shape=”rect” coords=”109,157,139,194″ href=”http://arrowheadtransitmn.com/schedules-by-county/carlton-county/&#8221; alt=”Carlton” />

<area shape=”rect” coords=”108,52,155,159″ href=”http://arrowheadtransitmn.com/schedules-by-county/saint-louis-county/&#8221; alt=”St Louis” />

<area shape=”rect” coords=”155,75,185,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/lake-county/&#8221; alt=”Lake” />

<area shape=”rect” coords=”185,70,243,125″ href=”http://arrowheadtransitmn.com/schedules-by-county/cook-county/&#8221; 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/&#8221; alt=”Koochiching” />

<area shape=”rect” coords=”59,94,104,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/itasca-county/&#8221; alt=”Itasca” />

<area shape=”rect” coords=”77,145,107,197″ href=”http://arrowheadtransitmn.com/schedules-by-county/aitkin-county/&#8221; alt=”Aitkin” />

<area shape=”rect” coords=”109,157,139,194″ href=”http://arrowheadtransitmn.com/schedules-by-county/carlton-county/&#8221; alt=”Carlton” />

<area shape=”rect” coords=”108,52,155,159″ href=”http://arrowheadtransitmn.com/schedules-by-county/saint-louis-county/&#8221; alt=”St Louis” />

<area shape=”rect” coords=”155,75,185,145″ href=”http://arrowheadtransitmn.com/schedules-by-county/lake-county/&#8221; alt=”Lake” />

<area shape=”rect” coords=”185,70,243,125″ href=”http://arrowheadtransitmn.com/schedules-by-county/cook-county/&#8221; alt=”Cook” />

</map>

<img usemap=”#Map” src=”http://arrowheadtransitmn.com/wp-content/uploads/2010/04/regionBlueGray.gif&#8221; 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s