Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

How to map an image with a search bar in it



5:30 pm on Jan 7, 2011 (gmt 0)

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 ]



6:05 pm on Jan 7, 2011 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.


6:14 pm on Jan 7, 2011 (gmt 0)

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..?


7:19 pm on Jan 7, 2011 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.


8:29 pm on Jan 7, 2011 (gmt 0)

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


8:34 pm on Jan 7, 2011 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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


9:02 am on Jan 10, 2011 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

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>

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


6:01 pm on Jan 17, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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>
</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">
<h5>On All Orders</h5>
<form id="top-search" action="whatever">
<!-- your form elements -->
</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.

Featured Threads

Hot Threads This Week

Hot Threads This Month