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

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

  1. #1
    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!
     
    Apposl, Mar 16, 2013 IP
  2. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #2
    themes4all, Mar 16, 2013 IP
  3. sentientsystem

    sentientsystem Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    you try this yet?:

    put the text-field-and-button elements inside their own container div, and use your image as the background, then, for the html elements, use this to make them completely transparent:
    "border : none; background : none; color : transparent;"
     
    sentientsystem, Mar 16, 2013 IP
  4. gregdbowen`

    gregdbowen` Member

    Messages:
    26
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    33
    #4
    You can style input elements to include a background image, this might achieve the results that you want. If you have an input <input name="search" id="search /> you could apply the css rule #search { width: 300px; height: 50px; background-image: url()} Where width and height would be the image dimensions and the background url would be your image.
     
    gregdbowen`, Mar 16, 2013 IP
  5. Apposl

    Apposl Member

    Messages:
    131
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    48
    #5
    Thanks so much for all the input. :) I'm a single parent so I'm just getting online now and reading some of these suggestions and I'll do some work on it tonight. Just trying to make the search image on my homepage at NE1UP dot com 'real.' At least capturing queries, if not hooked up to anything results-wise initially.

    Thanks again!
     
    Apposl, Mar 16, 2013 IP