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

 

Results 1 to 14 of 14
Hi all, I have a picture that I want to turn a portion of into ...
  1. #1
    Apposl's Avatar
    Apposl is offline Power Member
    Join Date
    Aug 2010
    Location
    Corvallis, OR
    Posts
    561
    Thanks
    367
    Thanked 80 Times in 59 Posts
    Blog Entries
    1

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

    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. #2
    Apposl's Avatar
    Apposl is offline Power Member
    Join Date
    Aug 2010
    Location
    Corvallis, OR
    Posts
    561
    Thanks
    367
    Thanked 80 Times in 59 Posts
    Blog Entries
    1

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

    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. #3
    inviz is offline Newbies
    Join Date
    Jun 2010
    Posts
    44
    Thanks
    3
    Thanked 4 Times in 3 Posts

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

    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;
    }

  4. The Following User Says Thank You to inviz For This Useful Post:

    Apposl (03-17-2013)

  5. #4
    Apposl's Avatar
    Apposl is offline Power Member
    Join Date
    Aug 2010
    Location
    Corvallis, OR
    Posts
    561
    Thanks
    367
    Thanked 80 Times in 59 Posts
    Blog Entries
    1

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

    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!

  6. #5
    thedorf's Avatar
    thedorf is offline Senior Member
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    1,070
    Thanks
    735
    Thanked 408 Times in 273 Posts

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

    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

  7. The Following User Says Thank You to thedorf For This Useful Post:

    Apposl (03-17-2013)

  8. #6
    Apposl's Avatar
    Apposl is offline Power Member
    Join Date
    Aug 2010
    Location
    Corvallis, OR
    Posts
    561
    Thanks
    367
    Thanked 80 Times in 59 Posts
    Blog Entries
    1

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

    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!

  9. The Following User Says Thank You to Apposl For This Useful Post:

    thedorf (03-17-2013)

  10. #7
    thedorf's Avatar
    thedorf is offline Senior Member
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    1,070
    Thanks
    735
    Thanked 408 Times in 273 Posts

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

    Quote Originally Posted by Apposl View Post
    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.
    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.

  11. #8
    Apposl's Avatar
    Apposl is offline Power Member
    Join Date
    Aug 2010
    Location
    Corvallis, OR
    Posts
    561
    Thanks
    367
    Thanked 80 Times in 59 Posts
    Blog Entries
    1

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

    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!

  12. #9
    Apposl's Avatar
    Apposl is offline Power Member
    Join Date
    Aug 2010
    Location
    Corvallis, OR
    Posts
    561
    Thanks
    367
    Thanked 80 Times in 59 Posts
    Blog Entries
    1

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

    You ever do freelance work, just as a by-the-by?

  13. #10
    thedorf's Avatar
    thedorf is offline Senior Member
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    1,070
    Thanks
    735
    Thanked 408 Times in 273 Posts

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

    Quote Originally Posted by Apposl View Post
    You ever do freelance work, just as a by-the-by?
    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.

  14. #11
    Apposl's Avatar
    Apposl is offline Power Member
    Join Date
    Aug 2010
    Location
    Corvallis, OR
    Posts
    561
    Thanks
    367
    Thanked 80 Times in 59 Posts
    Blog Entries
    1

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

    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!

  15. #12
    facebookdude's Avatar
    facebookdude is online now Supreme Member
    Join Date
    Feb 2010
    Posts
    1,381
    Thanks
    503
    Thanked 2,336 Times in 542 Posts

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

    Quote Originally Posted by thedorf View Post
    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.
    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.

  16. #13
    thedorf's Avatar
    thedorf is offline Senior Member
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    1,070
    Thanks
    735
    Thanked 408 Times in 273 Posts

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

    Quote Originally Posted by facebookdude View Post
    Hit me up PM if you'd be interested in teaming up on some fast money.
    PM sent.

    I would definitely be interested in hearing your opinion of who you trust to outsource things to, if you're willing.
    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 by thedorf; 03-17-2013 at 04:49 AM.

  17. #14
    inviz is offline Newbies
    Join Date
    Jun 2010
    Posts
    44
    Thanks
    3
    Thanked 4 Times in 3 Posts

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

    Apposl, post your image and i'll fix it for you.. easy peasy


Similar Threads

  1. Replies: 1
    Last Post: 06-05-2013, 05:09 PM
  2. Tips on ranking an image search site?
    By demongerbil in forum Black Hat SEO
    Replies: 0
    Last Post: 01-05-2012, 06:01 AM
  3. Python - How can I get a specific field of a csv file???
    By xLoKuMx in forum General Scripting Chat
    Replies: 3
    Last Post: 06-13-2011, 02:46 PM
  4. Input field -> Page
    By thefallendevelopment in forum General Scripting Chat
    Replies: 2
    Last Post: 09-16-2010, 11:37 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




BlackHatWorld on Twitter BlackHatWorld on FaceBook


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109