Search code examples
phpcssxhtmldreamweaverimagemap

Trouble Image Mapping In Dreamweaver


Dreamweaver is generally pretty easy to image map in but I can't seem to get the crosshairs for the image mapping tool to work. I have version CS5.5.

<html>
<head>

<div id="top-header">
<div align="center">
  <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" margin="20">
    <tr>
      <div id="top-image"><img src="pics/TopHeader.jpg"></div>
    <tr>
      <div id="nav-bar"><img src="pics/NavBar.jpg" name="NavBar" border="0" usemap="#NavBarMap" id="NavBar"></div>
      </div>
      </div>
      </div>
      </table>
</head>
</html>

Basically I'm trying to just click on the NavBar.jpg file in the design window, get the rectangle mapping cursor and just start making the map. For further clarity, this is a header.inc.php file that I'm using to include in all the pages on the site. Every time I go to click on the image it highlights the table code on the split screen.

Can you not image map within a table? I'm using the table for alignment purposes so I'd like to keep it in there if possible. Thanks.


Solution

  • I'm not exactly sure what you are shooting for in your navigation, but you can do the whole thing with CSS in a multitude of different ways. It will be easier to create, and easier to change later on if you find that you need to.

    If you haven't created navigation in css before, this list will help you cover a lot of ground: http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

    EDIT:

    This site also has some excellent tutorials to clear up any confusion: http://net.tutsplus.com/?s=css+navigation