How to create an image map using a list and CSS

Here we've created an image map using an unordered list and CSS, rather than the traditional 'hot spot' method in Dreamweaver.

Previously, we've showed you how to create an image map in Dreamweaver using the traditional 'hot spot' method. Here, we’ll show you how to code much the same thing using a more advanced technique — an unordered list and CSS. You’ll need an image and this time you’ll need to know ahead of time its width and height — ours is 600 pixels wide by 300 pixels tall.

Start in Dreamweaver with a new HTML document. Go to Insert —> ‘Layout Objects’ —> ‘Div Tag’, set the ID to read imagemap, click ‘New CSS Rule’ and then OK. Select the Box category and set the Height and Width to the size of your image. Click Background and choose imagemap as the background image. Click OK twice and the image will appear in your document.

You’ll build the selectable elements using CSS on top of this image. Click inside the div area then and select and delete the placeholder text in it. Without moving the cursor, click Insert —> HTML —> ‘Text Objects’ —> ‘Unordered List’ and type the items for the map. In our example, we want to link to information about beaches, the zoo, the harbour and city, so these are the list items. Go ahead and hyperlink each list item to the page you want to open when they’re clicked. Ignore the text formatting for now.

Create the CSS

Click ‘New CCS Rule’ to configure the list. To do this, select Compound (all of these selectors will be Compound ones) and set it to read #imagemap ul. Set the List —> ‘List Style Type’ to None, set the ‘Box Padding’ to ‘Same for all’ and the Margin to Zero. Go to Positioning —> Position —> Relative. Set the Box —> Width and Box —> Height to the width and height of your image and click OK.

Add a new CSS Compound rule for the list items by clicking ‘New CSS Rule’, selecting Compound and typing #imagemap li. Set the Border to a thin dotted line and a colour that contrasts with the rest of the document, and click OK. You should see lines marking out the list items; it looks awful, but it’s just as you work on them. You’ll remove the borders later.

Click in the first list item and from the tag selector at the bottom of the window, select the li tag by clicking in it. In the HTML properties for that tag, type an ID name; for example, for our beaches link we set the ID to beaches. To check that you’ve entered it correctly, switch to code view and you’ll see that each li tag includes an ID= entry.

Switch back to Design view and add a new CSS Compound selector for the first ID that you created for your list items; ours is called li#beaches. Set Positioning —> Position to Absolute and click OK. In the CSS styles panel, right-click this new selector and select Duplicate. Rename this style, replacing the ID with the ID for the second list item. We renamed the duplicate li#harbour. Continue to create a duplicate of this rule for each list item and name them appropriately. You should see small boxes all jammed together in the top-left corner of the div container.

Drag them into position over the relevant areas of the image. Because our image was created from even-size blocks, each one of the boxes can be positioned accurately by selecting the appropriate rule and adjusting its properties by typing the desired values in the rule properties area. If your clickable areas aren’t all the same size, drag and size the boxes appropriately in the editing area.

Add CSS to the links

So far, the image map will only work if you click on the text links. That won’t work for us, as we don’t want the links to show up on our image map — we want larger clickable areas.
To fix this, click ‘New CSS Rule’, create a Compound rule for the anchor link for the first of your list items; in our case, it will be called li#beaches a. Set the Block —> Display value to Block, set the Box —> Width and Box —> Height to the size of the block you just created for this list item; in our case, each box is 149 x 245 pixels in size.

Click the Block —> ‘Text Indent Property’, type -2000 and select Pixels from the drop-down list. This enlarges the clickable portion of the hyperlink to cover the area you want to be clickable. The -2000 pixels indent ensures the text isn’t visible; in effect, you’re pushing it out of the way with a negative indent value.

When you’ve created this rule, right-click it and select Duplicate. Make one duplicate copy of this style for every one of the li IDs. If, like us, your clickable areas are all the same size, you won’t need to make any changes to the rule. If the clickable areas are all different sizes, you’ll need to set the Height and Width property for each to the size of the box you created for that clickable item.

When you’re done, click on the #imagemap li style in the CSS styles list. Select the Border property and remove it. Save and preview your page, and test the clickable areas of your image map.