Mac SEO Blog

Our popular tool MapDesign allows users to create images with certain areas, or hotspots, that when clicked will take the user to different destinations (links). Check out this tutorial for adding an image map to an iWeb website. Make your iWeb site even more professional with image maps made in MapDesign

Video Transcript:

In this tutorial, I’m going to show you how to create an image map, and embed it on your iWeb website. If you are not familiar with image maps, imagine that you have an image on your site that allows users to be able to click on different areas of the image and be taken to different pages.

I’m going to show you how you can easily make an image map, and place it on your website in iWeb using RAGE Software’s MapDesign.

So the first thing we need to do, is drag and drop our image onto the MapDesign canvas.

Next, we can draw the link areas around certain sections of our image. These are known as hotspots.

On the left hand side, we will see all of the different hotspot locations that we just created. For organizational purposes, we can re-name these hotspots so we know where each one belongs to. Now comes the important part. We must link these hotspots so that when our users hover over them with their mouse, they will be able to click the hotspots to be taken to the page that we linked to.

We can do this by pressing the Edit button, which will bring up the Inspector window. In the Link To text box on the Behavior tab, type in the the URL that you want this particular hotspot to link to. You can also give some alternate text if you’d like. I also want you to check off the Open In New Window option. Don’t forget this step, otherwise it won’t work correctly.

When you are all done linking all of your hotspots, we must then press the Export To Web Site button. In this popup window, make sure that Simple Image Map is selected, and then press Next and save your image to a location on your hard drive that you won’t forget. I am saving mine to my Desktop. You will see that once I save it, I will have an index.html file, as well as an images folder.

Now, open up your web browser, and go to www.imageshack.com

Press the browse button and locate the image that you just saved. It should have the exact same name as the image you see on my screen which is rage_css_imagemap.jpg. Highlight the image, and then press Open. Then press the Upload Now button.

Once your image has been uploaded, you will then need to copy the URL in the Link text field. Paste the link in your address bar, and hit enter or return.

Next, hover your mouse over your image, and do a secondary, or right click and select Copy Image Location. Then paste that URL in your address bar and hit enter or return. Now just double check that only your image is shown using this address. If it is, proceed to the next step.

Locate the index.html file and open it in an HTML editor. I am using RAGE Software’s WebDesign.

Locate the code for the image which will read images/rage_css_imagemap.jpg.

Highlight the text within the quotation marks, just like I am doing here. Press the delete key, and then paste the URL that we had copied from the previous step.

Next, highlight all of the code located within the body tags, and copy it. Next, open up your site in iWeb, and drag an HTML Snippet onto the page. Paste the code that we just copied.

You should be able to see your image, and you will be able to move your image wherever you want on your page

Your image map is now complete, and when you publish your site, you will be able to test your image map by clicking on the hotspots you created.