1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to turn specific part of an image on site into an input field (search bar)?

Discussion in 'HTML & JavaScript' started by Apposl, Mar 16, 2013.

  1. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    94
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    Hi all,


    I have a picture that I want to turn a portion of into a search bar. It's already a picture that includes a search bar, and I want to actually allow visitors to type into that space and hit go.


    Can someone point me in the right direction on this? In the end, it'll be hooked to a metasearch engine. For now, I just want to see what people type there, if I can figure out how to do this.


    I'm using WordPress, and the image IS in a slider.


    Thanks so much for ANY help!
     
  2. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    94
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    Whoa weird? I have a picture on my site, that is actually of a search bar, and I want to actually allow visitors to type into that area and hit go.

    I'm using WordPress, and this image is in a slider.

    Is this possible? Eventually the PHP search script I'm procuring will be hooked up for results, but for now I just want to see what people type in.

    Really appreciate any help! I copy-pasted my question from another site and it didn't carry over too well lol. Thanks!
     
  3. inviz

    inviz Newbie

    Joined:
    Jun 15, 2010
    Messages:
    45
    Likes Received:
    5
    yes, this is possible with css.

    Code:
    <!-- HTML -->
    <input type="text" name="search" id="search" />
    
    <!-- CSS -->
    input#search {
    background: url('path/to/image.jpg') no-repeat;
    border: none;
    outline: none;
    }
    
     
    • Thanks Thanks x 1
  4. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    94
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    Thank you!

    Now I just need to figure out and understand where that goes, and how it makes a specific part of my image an input field, and not the whole field.

    Basically it's an image of search bar - but I only want the search bar to act as an input field, not the whole image. I don't see how I input code into the image, or highlight the section specifically I want to be the input field...

    Trying to understand how this is accomplished, much appreciated!
     
  5. thedorf

    thedorf Senior Member

    Joined:
    Oct 1, 2008
    Messages:
    1,193
    Likes Received:
    699
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    What you are wanting to do will probably take a coder. The slider makes this more difficult. I won't attempt to go into that. If you were to use one static image you can place the input field over the image by using negative or positive css positional placement. Start by reading this: http://www.tizag.com/cssT/position.php
     
    • Thanks Thanks x 1
  6. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    94
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    Perfect, got ya on that one. I figured the slider would cause an issue but get what you're saying with the static image, I can swing that myself and make it happen.

    Thank you x2 for the referral to the tizag tutorial - I have a bunch of their tutorials bookmarked from yesterday (I'm learning PHP), but I'd never heard of them before so wasn't sure how reputable they are. Now getting two referrals I feel comfortable learning from them. :)

    Thanks a bunch!
     
    • Thanks Thanks x 1
  7. thedorf

    thedorf Senior Member

    Joined:
    Oct 1, 2008
    Messages:
    1,193
    Likes Received:
    699
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    Tizag rocks I have been using them for years and I am a hardcore php programmer. They don't try to scam you and they provide rock solid information.
     
  8. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    94
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    Great, gives me no worries then! I'm signed up for some PHP classes next term at school and am learning all I can, the best I can, before then. I have a project that's finally driving me to dig in and learn rather than outsource everything, and I am. It's great. I just needed a project I was interested in. :)

    Anyway, thanks again!
     
  9. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    94
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    You ever do freelance work, just as a by-the-by? ;)
     
  10. thedorf

    thedorf Senior Member

    Joined:
    Oct 1, 2008
    Messages:
    1,193
    Likes Received:
    699
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    No, but thanks for asking. I have a full-time job coding php, and I am booked with clients outside of that, clients I would rather get rid of. I love IM but I make much more coding.

    That being said, I will tell you that I now outsource part of my coding work and would like to outsource all of it. I am thinking that is the way to scale up, but I already understand what I can and cannot outsource, so learning PHP sounds great.
     
  11. Apposl

    Apposl Power Member

    Joined:
    Aug 26, 2010
    Messages:
    583
    Likes Received:
    94
    Occupation:
    Marketing and Promotions Coordinator
    Location:
    Corvallis, OR
    That last bit is exactly why I'm learning. I learned HTML and CSS and stuff because I thought the prices I was being quoted were ridiculous. Glad I did. It was close, Java or PHP, but lots of great PHP resources I've been going over.

    I would definitely be interested in hearing your opinion of who you trust to outsource things to, if you're willing.

    Either way, thanks a bunch for all your insight!
     
  12. facebookdude

    facebookdude Supreme Member

    Joined:
    Feb 28, 2010
    Messages:
    1,489
    Likes Received:
    2,485
    Really? Damn I would never go back to working with clients after working for myself. An experienced coder like you should be absolutely killing it man.

    Hit me up PM if you'd be interested in teaming up on some fast money.
     
  13. thedorf

    thedorf Senior Member

    Joined:
    Oct 1, 2008
    Messages:
    1,193
    Likes Received:
    699
    Occupation:
    what? I gotta have a job?
    Location:
    BHW - Where else?
    PM sent.

    I am big into Magento so my source works specifically with this. He is from India and I can only use him for certain projects. I like working with him but if you are not on Magento he probably would not take you on as a client.
     
    Last edited: Mar 17, 2013
  14. inviz

    inviz Newbie

    Joined:
    Jun 15, 2010
    Messages:
    45
    Likes Received:
    5
    Apposl, post your image and i'll fix it for you.. easy peasy