Video Tutorial-Hot Spots in iWeb

Hot Spots in iWeb

This tutorial will show you how to make different parts of your image clickable.  Great if you want each head of a family photo to go to a different page, or a sports team photo, or many other possibilities.


  1. Chase 25 April, 2010 at 17:40 Reply

    I really like this idea and am excited to use it. Do you know of a way to display the person’s name as you roll-over, kind of like tags on Facebook? Probably would be a different method altogether…

    • Chase 31 May, 2010 at 19:33 Reply

      I found a method that works though not quite what I was looking for. I basically took the “Rollover” buttons tutorial and started with that. I made two .png files in Photoshop. Both identical in size and one is completely transparent while the other is transparent but the name of the person at the bottom. I chose the size by placing a shape over the face I wanted and pulling the width and height from that. Then I made an HTML snippet that has the totally transparent image as the “mouse off” state and the one with the name as the “mouse on” state. It works pretty well but sometimes is doesn’t let go of the “mouse on” state even when the mouse isn’t on the image. That’s the best I’ve come up with though.

  2. Shiv 10 June, 2011 at 06:08 Reply

    Great tutorial, I have been looking for this, Just would also like to know how to make the clickable image include an cursor-effect (for example shadow effect, or increase in size/zoom effect), as I know you can do this with clickable text link in i-web, but how would you do this on a clickable image???

    Many Thanks

Leave a reply