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.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with figuring out coding

    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.

    http://www.bureauofcommunication.com...romanticintent

    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!

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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...ticintent2.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).
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks! One more request if I could

    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>

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

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