homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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)

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)

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)

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)

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)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved