View Full Version : Image Form

07-30-2010, 03:16 AM
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


Old Pedant
07-30-2010, 03:20 AM
??? Why do you think you need JavaScript for this?

You could do all that with CSS.

Old Pedant
07-30-2010, 03:21 AM
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.

07-30-2010, 03:22 AM
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

07-30-2010, 03:24 AM
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

Old Pedant
07-30-2010, 03:26 AM
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.

Old Pedant
07-30-2010, 03:27 AM
You've got me. I was being way overly naive.

Okay, now you've made me think this could be an interesting project!

07-30-2010, 03:28 AM
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

Old Pedant
07-30-2010, 03:38 AM
Don't know of any existing, but surely they must exist. Google time?

Here's the first hit I got. Looks promising:

07-30-2010, 03:59 AM
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

Old Pedant
07-30-2010, 04:03 AM
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.)

07-30-2010, 04:10 AM
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

07-30-2010, 04:16 AM
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

http://i823.photobucket.com/albums/zz156/lonogod/th_cb1.jpg?t=1280456336 http://i823.photobucket.com/albums/zz156/lonogod/th_cb2.jpg?t=1280456336 http://i823.photobucket.com/albums/zz156/lonogod/th_cb3.jpg?t=1280456336 http://i823.photobucket.com/albums/zz156/lonogod/th_cb4.jpg?t=1280456336 http://i823.photobucket.com/albums/zz156/lonogod/th_cb5.jpg?t=1280456336 http://i823.photobucket.com/albums/zz156/lonogod/th_cb6.jpg?t=1280456336

07-30-2010, 04:31 AM
I am studying

07-30-2010, 04:34 AM
Um...did you mean to submit that?

- Lono

Old Pedant
07-30-2010, 07:40 AM
He was probably going to post some advertising spam and the spam filter stopped him. That's typical of the comment that spammers make when they are trying to disguise spam as comments on ongoing threads.

Old Pedant
07-30-2010, 07:45 AM
I guess we can do the three states, but the third state--while the button is down--will only last an instant. Is it worth it?

I expected you to make some fancier images than that, more in line with the checkboxes you showed in your first post. I'm almost disappointed!

Tell you what, I'll just do the four states tonight, because I'm tired. Will look into doing six states tomorrow.

Okay, just saved the images on my box. Time me...

Old Pedant
07-30-2010, 07:58 AM
Oh crud, thought I was finished. But realized the an <img> tag won't accept an onclick event!

Okay...mods needed.

Old Pedant
07-30-2010, 08:11 AM
Well, that wasn't the problem. It's just that you can't click on a <label> and get it to act the same as the label for a real check box.

A couple of ways around that, but I'll leave that for another day.

This works, at least:

<script type="text/javascript">
function cbOver(cb) {
cb.src = cb.src.replace(".jpg","_hover.jpg");
function cbOut(cb) {
cb.src = cb.src.replace("_hover","");
function cbClick(cb) {
if ( cb.src.indexOf("on") > 0 )
cb.src = cb.src.replace("on","off");
document.getElementById("CB"+cb.id).value = "no";
} else {
cb.src = cb.src.replace("off","on");
document.getElementById("CB"+cb.id).value = "yes";
<style type="text/css">
img { border: none; }
<input type="hidden" name="anything" id="CBtest1" value="no"/>
<img src="cb_off.jpg" onmouseover="cbOver(this);" onmouseout="cbOut(this)" onclick="cbClick(this);" id="test1">
<label for="test1"> Test 1 </label>
<div style="visibility: hidden;">
<img src="cb_on.jpg"/><img src="cb_on_hover.jpg"/>
<img src="cb_off.jpg"/><img src="cb_off_hover.jpg"/>

I renamed your images to what you see there, for easy of use.
The images in the <div> that is hidden are there to make sure that all images are pre-loaded, so no delay in the hover effect. Can do the same thing with JavaScript-based preloading, but why bother. This is quick and dirty and works as well.

07-30-2010, 02:28 PM
That's awesome! Thank you so much! I can't believe you were able to do that so fast. I do have a quick question though. I didn't see anything in the code about it being a checkbox. Is that just understood automatically? Thanks again!

- Lono

Old Pedant
07-30-2010, 09:38 PM
??? It's not a checkbox.

It's a CSS/Javascript *SIMULATION* of a checkbox.


Incidentally, if we were creating a library of these kinds of things, I'd have a JS "factory" that would create all that ugly code for you. This was just a quick and dirty demo of the concept.