View Full Version : Need help with figuring out coding

Christina Knapp
12-07-2008, 05:08 AM
I am a designer in need of some help figuring out some coding. My company would like to do an online mad lib type letter to Santa. Here is the website example I would like to follow to do this.


I understand that there is probably a lot more going on here than just Javascript. I am familiar with CSS, HTML, and a little Action Script. I would mostly just like to know how the action of the text field being a hidden rollover works and the function of that text field then placing the text onto the form like it was typed there. Any help would be awesome! :thumbsup:

12-07-2008, 06:31 AM
It's not actually too hard and can be done entirely in JS/CSS.

They have a background image for the form (http://www.bureauofcommunication.com/romanticintent2.jpg), and of course all the little checks and fill-in-radio images cut up. They then use CSS to position all the text fields and pseudo radio buttons across the background image.

They are using <input type="text">s with transparent backgrounds and no borders for the text inputs. onmouseover they make visible a background element (positioned directly behind the inputs) and onmouseout the background element disappears. This allows for completely custom designs for the text inputs.

They are using <div>s that contain <img>s for the radio buttons. The container divs are using the CSS pseudo element :hover to change its background-image for the mouse over effect. When you click on the div it pseudo-"selects" the radio button. I say "pseudo" because the actual radio button data is stored in a hidden input behind the scenes. Visibly speaking, when you click on the "radio button" div, it is making visible and invisible (checking and unchecking) a containing <img>.

The Further Notation section is using 3 text inputs as opposed to the difficult-to-style textarea (good thinking).

Christina Knapp
12-08-2008, 02:15 PM
Thanks for your help, I have managed to create the CSS part of telling the [input# text] to become transparent and have no border but I have tried to find a javascript code that close to onMouseOver and onMouseClick to make the input text then have a background and border again but can't find anything like it. I checked out the site's source code but didn't see it there either. I am new at the javascript so could be totally missing it. I have the code for making an image rollover is there any way you can tell me how I can manipulate that code to make it do what I want? Here is the code I have below:

<a href="name.html" onmouseover="document.name.src='images/name_on.gif' "
onmouseout= " document.name.src='images/name_off.gif' "> img src="images/name_off.gif" width=" " height=" " name= " " alt=" " /> </a>

12-08-2008, 09:05 PM
I'm assuming you're more of a web designer than developer. If you have already created your images, you can e-mail them to me if you like and I can develop the code you'll need with some explanations on how it works.