RapidWeaver FAQ - Image map


How can I add an imagemap to RapidWeaver? Can I have small windows (tooltips) popping up when people point their mouse over part of the image (on mouseover)? Can I have different parts of an image linking to different pages?

What is an image map? An imagemap is an interactive image either displaying tooltips, linking to different pages from different areas or both.

What can it be used for? Let’s say you’re a traveler. You may want to have a map on your website. By moving the mouse over a map the country’s name would show up and by clicking the country’s area people would get to the part of the website about that country. Or maybe you have a website for your business and a group photo on it. Wouldn’t it be great if moving the mouse over someone’s head his/her name would show up? And by clicking on it people would get to the biography and their function in the business? That’s where image maps come in handy...

Move your mouse over the application icons in the dock of the following image to see tooltips appearing. In some cases they are also links...

This tutorial uses a third party application called
MapSpinner (14.95$) mainly used to find out the coordinates of the area of interest. If you have any other idea on how to find them let me know.

1. Go to the optima system site to download
MapSpinner and open the application
2. Open the image you want to turn into an image map in Map Spinner. Open it the size you want to use it on the web if you resize it after publishing all the coordinates get messed up. File, New..., Select the image, enter the title for the image map and click Next.
3. With a circle, rectangle or polygon, select the area you would like to be a link

Once you selected an area under Area Info enter the URL of the page you want that area to point to, the Tooltip (what you want to appear as the description in the popup) and select Target Window or Frame _top for same window, _blank for it to open in a new window.

4. Go to File, Export As HTML...
5. Open the generated file in TextWrangler and get the code which looks like this...

<img src="Dock" width="547" height="319" usemap="#Dock" border="0">
<map name="Dock">
<area shape="rect" coords="8,268,41,313" title="Dictionary" nohref>
<area shape="rect" coords="44,268,77,313" href="http://rapidweaverfaq.org/site/best_music_player.html" title="iTunes" target="_top">
<area shape="rect" coords="80,267,113,312" title="Pages" nohref>
<area shape="rect" coords="116,268,149,313" title="iPhoto" nohref>
<area shape="rect" coords="152,268,185,313" title="Word" nohref>
<area shape="rect" coords="187,268,220,313" title="TextEdit" nohref>
<area shape="rect" coords="223,268,256,313" title="TimeMachine" nohref>
<area shape="rect" coords="259,268,292,313" title="Cyberduck" target="_top" nohref>
<area shape="rect" coords="510,269,544,314" title="Grab" nohref>
<area shape="rect" coords="474,268,508,313" title="Photoshop" nohref>
<area shape="rect" coords="438,268,472,313" title="RapidWeaver" nohref>
<area shape="rect" coords="401,267,437,312" title="Preferences" nohref>
<area shape="rect" coords="365,268,398,313" title="AppZapper" nohref>
<area shape="rect" coords="333,268,363,313" title="MassReplaceIt" nohref>
<area shape="rect" coords="292,268,332,313" title="iWeb" nohref>

6. A few things to change...
Under img src add the extension to the picture's name if it's not there and add a / in front of it if you later upload the image to the root of your server. Or replace the name with the URL to the image on your server once you uploaded it.
You can change the title which will display as a tooltip
You can change the URL the area links to
You can add a URL (by adding href) where you didn't set one or remove one an add nohref instead
You can change the target of a link (_top, _blank)

With these settings the tooltip will appear in the default style which doesn't look that good. Instead you may want to use another style for tooltips like the one I used in the example above Tips (mootools)

Click here to download a folder named tooltips1
2. Upload the folder to the root of your server
3. Copy and paste the following code where you added the code for the image map

<LINK media=screen href="/tooltips1/style(1).css" type=text/css rel=stylesheet>

<SCRIPT src="/tooltips1/mootools.svn.js"

<SCRIPT src="/tooltips1/demos.js"
<SCRIPT type=text/javascript>
        window.addEvent('domready', function(){
            /* Tips 1 */
            var Tips1 = new Tips($$('.Tips1'));
            /* Tips 2 */
            var Tips2 = new Tips($$('.Tips2'), {
                    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
                onShow: function(toolTip) {
                onHide: function(toolTip) {
            /* Tips 3 */
            var Tips3 = new Tips($$('.Tips3'), {
                showDelay: 400,
                hideDelay: 400,
                fixed: true
            /* Tips 4 */
            var Tips4 = new Tips($$('.Tips4'), {
                className: 'custom'

4. In the links of the image-map add the appropriate class for the tooltip you want to use “Tips1” to “Tips4”...

In the example above I added


to the area

<area shape="rect" coords="116,268,149,313" title="iPhoto" nohref>

which resulted in

<area shape="rect" coords="116,268,149,313" title="iPhoto" nohref class="Tips1">

5. Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code". That's it.

This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -

Now share it…