How to map an image with a search bar in it

[guod]

I am creating a header for my site that will include a few navigation links, logo (with a link to home), some text and a search bar. I am wondering about a few things. How do I map out what I want to do.

I uploaded an example header of what I kind of want it to look like. I just do not know how to map it correctly and get a search bar to appear on the image or map something like that. Everything I put the gray boxes around will need mapping.

Where do I start?

[img146.imageshack.us ]


Thanks

[tedster]

A search box is a <form> element - you can style it however you want with CSS. You might also find a search box that looks the way you want and use View Source to see the mark-up that creates their effect.

[guod]

To keep things simple, lets say I want to use the search box that I put in the pic. It is the standard one that my shopping cart offers. I have the form but how do I get the form to integrate with the search box image. Do the coordinates map to it or..?

[tedster]

Are you using a particular script to generate that search box and image - rather than writing the html yourself? If so there should be a Read Me file or Help file associated with it that can help you.

[guod]

i just made that in photoshop to show the layout I wanted. I do have code for a form.

[tedster]

Have you made an attempt at the HTML and CSS? If so, what kind of troubles are you running into?

[tangor]

You should look up "image map" to find out how to mark the sections and activate them in HTML code. Pretty straight forward when working with rectangular codes. Looks something like this:

<map name="bookmap-1">
<area shape="rect" alt="B" coords="0,0,56,100" href="b.html" title="B">
<area shape="rect" alt="T" coords="56,2,111,100" href="a.html" title="T">
<area shape="rect" alt="M" coords="113,2,169,100" href="m.html" title="M">
<area shape="rect" alt="P" coords="170,0,222,100" href="p.html" title="P">
<area shape="rect" alt="V" coords="224,0,281,100" href="v.html" title="V">
<area shape="rect" alt="W" coords="283,0,335,98" href="w.html" title="W">
<area shape="rect" alt="U" coords="336,0,391,100" href="u.html" title="U">
<area shape="rect" alt="C" coords="393,0,447,100" href="c.html" title="C">
<area shape="rect" alt="P" coords="448,0,499,99" href="p.html" title="P">
<area shape="default" nohref>
</map>

From one of my sites using image maps... deleted all "info" so if there are dupes/oddities, apologies.

[rocknbil]

Agreed, however, looking at that layout a map and making all those elements image based is not the best solution for SEO and accessibility. You have a single header bar at the top with an inline <p> and <a> styled with a background image and a <ul> floated/text aligned right. Then you have four text elements floated left with the search form last in line, followed by the page content.

This is types on the fly as a starting point:

<div id="header"> 
 <p><a href="/checkout">Checkout</a></p> 
 <ul id="header"> 
 <li><a href="/">Home</a></li> 
 <li><a href="/help">Help Center</a></li> 
 <li><a href="/customers">My Account</a></li> 
 <li><a href="/contact">Contact Us</a></li> 
 </ul> 
</div><!-- end header --> 
<div id="sub-header"> 
 <p id="logo"><a href="/">Home</a></p> 
 <p id="text-blurb">This is your paragraph of clickable text or whatever.</p> 
 <div id="shipping-blurb"> 
 <h4>FREE SHIPPING</h4> 
 <h5>On All Orders</h5> 
 </div> 
 <form id="top-search" action="whatever"> 
 <!-- your form elements --> 
 </form> 
</div> <!-- end sub header --> 

Then through the use of background images, negative indents on text where you want ONLY images, you maintain accessible semantic HTML that can be read by search engines and various client devices.