X-Cart forums

[amcc]

How can i put a magnifying glass image into the search box form field, so that it is either:

fixed permanently to the left; or

disappears when you put the mouse curser in the box to start typing

Cheers

[carpeperdiem]

can you show an example of how another site does this? I've never seen an image embedded into a text field. ever. is this even possible?

[balinor]

If you are talking about something like apple.com, that is done by using a background image.

[carpeperdiem]

Originally Posted by balinor

If you are talking about something like apple.com, that is done by using a background image.

That's cool! How do they do that? How do they make the left side of the input box have a text margin? CSS is your friend, I guess...

[balinor]

I'm guessing they just tuck an image up next to the search box, as I don't think that is part of the actual search box.

[Yurij]

Originally Posted by amcc

How can i put a magnifying glass image into the search box form field, so that it is either:

fixed permanently to the left; or

disappears when you put the mouse curser in the box to start typing

Cheers

For the text of this is done so (open file skin1/customer/search.tpl):

Find this line and change it:

PHP Code:

<td valign="middle"><input type="text" name="posted_data[substring]" size="16" value="{$search_prefilled.substring|escape}" /></td> 


On this line:

PHP Code:

<td><input type="text" name="posted_data[substring]" onFocus="this.value = (this.value == 'Enter Keyword') ? '' : this.value;" onBlur="this.value = (this.value == '') ? 'Enter Keyword' : this.value;"   size="37" value="Enter Keyword"  /> </td> 


[carpeperdiem]

Originally Posted by balinor

I don't think that is part of the actual search box.

Apple is tricky.

They are using a transparent image with an "onFocus" to CHANGE the image from normal to highlighted, and the search field is within it. Very smart designer and programmer there. It's a VERY functional user interface. Uh, Duh. It's Apple. If anyone figures out exactly how they do it, please share.

[Jayk]

That is pretty cool. I'd like to see how to do that one too.

Jason

[kube]

Here's one variation. It's called prettysearch, this ones uses the mootools framework...
http://www.conviodesign.com/2007/08/26/pretty-search/

[amcc]

Thanks Yurij, that worked great. I found this in relation to the background image but haven't tried it out yet:

http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/