Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Image Form

  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image Form

    Hello, everyone! I tried searching for this but couldn't find what I was looking for, so...

    Basically, I was hoping to take images and use them as form attributes. The image below has everything that I'm talking about. Instead of using HTML to do a plain form, I wanted to use JavaScript to do a more customized form. Is this possible with JavaScript? If so, could someone point me in the right direction? Thank you!

    - Lono


  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    ??? Why do you think you need JavaScript for this?

    You could do all that with CSS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    Making the checkboxes look exactly like that might be tricky. Getting them the right color and size should be possible, but the x's wouldn't necessarily conform to what you have.

    For that, you might have to use images and, yes, JavaScript to flip the image when it is checked on.

    But everything else looks like just CSS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I thought that CSS didn't allow you to change the arrows on the selection box? Also, using an image with JavaScript would allow it to be consistent in all browsers, instead of every browser processing the CSS differently.

    - Lono

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I don't really know a ton about CSS. I didn't know it was possible to change the colors of checkboxes.

    Oh...and the checkboxes don't have to have X's. Checks are fine.

    - Lono

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    Ahh...good point re the <select>.

    Forgot about that.

    Okay, you could do it with JS, combined with CSS. A bit of work, but not horrible amount.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    You've got me. I was being way overly naive.

    Okay, now you've made me think this could be an interesting project!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great! I'm not a JavaScript expert by any means. My level is around 0-1...sorry. Any idea where I could start? Or is there an existing script that might fit my needs that you know of? Thanks for you help!

    - Lono

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    Don't know of any existing, but surely they must exist. Google time?

    Here's the first hit I got. Looks promising:
    http://www.kelvinluck.com/assets/jqu...crollPane.html
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you! Sorry it took so long...I had to put my son to bed. I don't see anything about checkboxes. That essentially just allows you to further customize scrolling with CSS...right? Or am I missing something? Thanks again!

    - Lono

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    The checkboxes are easy.

    Just use a pair of images. Or three or four images if you want hover effects.

    The user clicks on an "off" image you swap it for the "on" image.

    You just store the on/off state in a HIDDEN form field.

    Presto. Give me the 2 or 4 images and I can code it in 10 minutes.

    The fake textarea and fake <select> are the hard ones. Solve those and the rest is easy.

    (Radio buttons are as easy as the checkboxes. I've actually done them before as images.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow! Thanks for the offer! I'll get some images together and post them in a few. I'll just make them simple so that I can replace them if needed. Also, I plan to use the information in the form to send an email using a PHP script. Would that still be possible with the script you're going to write? Thank you! I'll post the images in a few minutes.

    - Lono

  • #13
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok. Here are six images. Can you make it so that the white images are the button when they are just sitting there, the grey images when they mouse over it, and the black images when they press it? That's more than you said, but I thought I'd include them just in case. Thanks again!

    - Lono

    Last edited by lonogod; 07-30-2010 at 04:21 AM.

  • #14
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    i am studying

    I am studying

  • #15
    New Coder
    Join Date
    Jul 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Um...did you mean to submit that?

    - Lono


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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