iWeb FAQ - Image map

iWebFAQ.org

 

How can I add an imagemap to iWeb? 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?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


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 and the heads of the following image to see tooltips appearing. In some cases they are also links...






























Chapter 1: Easy way

Chapter 2: More complicated but better way



Chapter 1: Easy way


If you just have an image and want to have different links in different areas of the image you can add the image to iWeb. Go to Insert, Shape and add a shape in front of the area where you want the link to be. Reduce the Opacity of the shape to 0%, Inspector, Graphic, Opacity. Link the shape to the page you want.


However having many shapes on the page may cause problems. They may move around when publishing or if you move the image for some reason you also have to move all the shapes. Ina addition to that this gives you no control on what displays as the text.



Chapter 2: More complicated but better way


This tutorial uses a third party application called MapSpinner (free to try, 14.95$ to buy) 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.jpg" 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>

</map>


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 (If you don't know what the root is or how this is done read it here). 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). It doesn’t work with Alternative HTML so you have to use an HTML Snippet.


1. Click here to download a folder named tooltips1

2. Upload the folder to the root of your server (If you don't know what the root is or how this is done read it here)

3. Copy and paste the following code into the HTML Snippet 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"

type=text/javascript></SCRIPT>


<SCRIPT src="/tooltips1/demos.js"

type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>

window.addEvent('domready', function(){

/* Tips 1 */

var Tips1 = new Tips($$('.Tips1'));


/* Tips 2 */

var Tips2 = new Tips($$('.Tips2'), {

initialize:function(){

this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);

},

onShow: function(toolTip) {

this.fx.start(1);

},

onHide: function(toolTip) {

this.fx.start(0);

}

});


/* Tips 3 */

var Tips3 = new Tips($$('.Tips3'), {

showDelay: 400,

hideDelay: 400,

fixed: true

});


/* Tips 4 */

var Tips4 = new Tips($$('.Tips4'), {

className: 'custom'

});

});

</SCRIPT>



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


class="Tips1"


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. You’re done.




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


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark