Welcome to WebmasterWorld Guest from 54.205.106.138

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)

Junior Member

5+ Year Member

joined:Aug 3, 2010
posts:62
votes: 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 ]


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

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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)

Junior Member

5+ Year Member

joined:Aug 3, 2010
posts:62
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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)

Junior Member

5+ Year Member

joined:Aug 3, 2010
posts:62
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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)

Senior Member from US 

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

joined:Nov 29, 2005
posts:7154
votes: 442


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.
6:01 pm on Jan 17, 2011 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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>
</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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members