ImageReady ImageMaps to Title + Link Objects in Webcam Image

Image Maps - Create an ImageMap in ImageReady to Title and Link Objects in Your Live Webcam Image

You can create Image Maps with ImageReady (Photoshop) to add Titles and links to objects, shapes or areas in your live Webcam image.

When a site visitor mouses over these mapped areas, a title will appear and when clicked you can display a page with details of the particular object or area.

Start ImageReady, open an image saved from your Webcam and proceed as follows to create the Image Map.

Make sure the Image Map palette is displayed in ImageReady ImageReady Image Map Palette

If it isn’t in view, click the Windows menu and check Image Map in the dropdown menu.

Click the Image Map Tool ImageReady Image Map Tool

and select either Rectangle, Circle or Polygon Tool to define the individual map areas for your image.

On the image, left click and drag over an object or area to define the shape. The Image Map palette should now become active and editable. Enter a Name: for this object or area, the URL to navigate to when it’s clicked, and the alt: text that will appear when the user mouses over this particular map area. Continue to create as many areas as required, with the shape tools. The Polygon Image Map tool lets you outline almost any shape.

When done, from the File menu choose Save Optimized As, select Save as type: HTML Only (*.html), Enter a name and save the html page to your computer. Open this file in Notepad, and you will see the Image Map code, similar to the code below. Note the Name attribute in the map code <map name="…._Map">. This is the same Name you chose to save the file as, and needs to be entered into the Code Generator Page on this site to activate the map on your display page.

Copy this Image Map code , from (and including) the starting <map name= to the closing </map> to your Webcam display page, just before the closing </body> tag and add the Name (name=”…) to the ‘UseMap (Name)’ box on the Code Generator Page
That’s it. With the Image Map code added to the Webcam Display page and the Map Name added to the code Generated, the map should work on your live Webcam images. Below is the Image Map for the image on this page.

Use the Webcam Locator feature Align camera with this positioning feature

in CamUp to re-align Webcam with objects in your Image Map if you re-mount the Camera.

Step 4:

Your Webpage

Automatically Generate and test code to insert in your web page that displays and refreshes images to site visitors