How do I overlay objects on a image map?

I had the following code that worked just the way I wanted.  The header image was displayed through a table and the subsequent <div> positioned objects over the header image:

<center>
<table border="0" cellpadding="0" cellspacing="0" id="table_header">
       <tr>
        <td align="left" valign="top"><div id="div_search">
    <form action="index.php?option=com_search&amp;Itemid=5" method="get">
            <input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />
      <input type="hidden" name="option" value="com_search" />
      <input type="hidden" name="Itemid" value="5" />      
</form>      <div id="div_user7"><?php mosLoadModules ( 'user7' ); ?></div></div>
<div id="div_pathway"><span class="pathway">
<?php include "pathway.php"; ?>
</span></div></td>
    </tr>
</table>
  </center>

#table_header{
width:900px;
height:156px;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
}

I changed the code so that I used a image map to create links at various points on the header image.  Now the <div> all appear below the header image and I don't know what to do to get them to overlay as they did before.  here is my most recent code:

<center>
<map name="map1">
<area href="http://www.google.com/" alt="google" title="Google" shape="circle" coords="22,19,14"/>
</map>
<?php echo '<img src="' .$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/header.jpg" border="0" alt="" usemap="#map1"/>'; ?>
<div id="div_search">
    <form action="index.php?option=com_search&amp;Itemid=5" method="get">
            <input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />
      <input type="hidden" name="option" value="com_search" />
      <input type="hidden" name="Itemid" value="5" />      
</form>      <div id="div_user7"><?php mosLoadModules ( 'user7' ); ?></div></div>
<div id="div_pathway"><span class="pathway">
<?php include "pathway.php"; ?>
</span></div>
</center>

Thanks.
vsllcAsked:
Who is Participating?
 
brundoCommented:
Is the change of

   <div id="div_search">

into

   <div id="div_search" style="position:absolute; top: 1px; left: 5px;">

what you wanted?

If it helps you, you can make it more ellegant - leave <div> tag as it is, and define style:

#div_search {
    position:absolute;
    top: 1px;
    left: 5px;
}
0
 
Eddie ShipmanAll-around developerCommented:
Did you modify the z-order of the divs?
0
 
vsllcAuthor Commented:
Can you please elaborate?  I've heard the term but am not familiar with the coding process of them.
0
 
Eddie ShipmanAll-around developerCommented:
Look at any CSS documentation, it will describe it.
0
 
vsllcAuthor Commented:
I thought I had closed this.  Sorry for the delay.  This worked.  Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.