Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How do I overlay objects on a image map?

Posted on 2007-10-15
5
Medium Priority
?
1,877 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:vsllc
  • 2
  • 2
5 Comments
 
LVL 26

Expert Comment

by:Eddie Shipman
ID: 20085182
Did you modify the z-order of the divs?
0
 

Author Comment

by:vsllc
ID: 20087279
Can you please elaborate?  I've heard the term but am not familiar with the coding process of them.
0
 
LVL 26

Expert Comment

by:Eddie Shipman
ID: 20092587
Look at any CSS documentation, it will describe it.
0
 
LVL 13

Accepted Solution

by:
brundo earned 2000 total points
ID: 20179570
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
 

Author Comment

by:vsllc
ID: 20971487
I thought I had closed this.  Sorry for the delay.  This worked.  Thanks.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question