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.
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).
12-08-2008, 02:15 PM
<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.