homepage Welcome to WebmasterWorld Guest from 54.145.182.50
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
guod



 
Msg#: 4250360 posted 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 ]


Thanks

 

tedster

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



 
Msg#: 4250360 posted 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.

guod



 
Msg#: 4250360 posted 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..?

tedster

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



 
Msg#: 4250360 posted 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.

guod



 
Msg#: 4250360 posted 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.

tedster

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



 
Msg#: 4250360 posted 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?

tangor

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



 
Msg#: 4250360 posted 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>
</map>


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

rocknbil

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



 
Msg#: 4250360 posted 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>
</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.

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