SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with changing buttons

    I'd like to improve the looks of some buttons on a web page.
    I believe the code with the current buttons is this:

    Code:
    document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();">
    &nbsp;&nbsp;&nbsp;<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">');
    Someone suggested:
    "I would leave the existing buttons and add background images via CSS. Something like this:
    Code:
    style="background: url('/your_button_image.png') no-repeat"
    However, I don't know how to integrate this with the existing code.

    Any additional help will be appreciated.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You don't integrate CSS with JavaScript. They go in completely separate files. The CSS is attached into the page using a <link> tag agd the JavaScript is attached to the page using a <script> tag.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    Maybe using the word 'integrate' is incorrect. I'm looking for help upgrading the existing buttons that appear within the current javascript code:
    Code:
    <script language="javascript" type="text/javascript">
    <!--document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();">&nbsp;&nbsp;&nbsp;<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">');//--></script>
    Any additional guidance with this will be appreciated.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The point is, you can style buttons any way you like. In your stye sheet—

    Code:
    input[type="button"] {
        padding: 20px;
        border: none;
        color: #FFF;
        background: #F00;
        font-size: 2em;
        border-radius: 10px;
    }

  5. #5
    SitePoint Member isdixit's Avatar
    Join Date
    Nov 2012
    Location
    Bhopal, IN
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    Thanks for your reply.
    Maybe using the word 'integrate' is incorrect. I'm looking for help upgrading the existing buttons that appear within the current javascript code:
    Code:
    <script language="javascript" type="text/javascript">
    <!--document.writeln('<input type="button" name="reset_button" value="Reset" onClick="resetForm();">***<input type="button" id="upload_button" name="upload_button" value="Upload" onClick="uploadFiles();">');//--></script>
    Any additional guidance with this will be appreciated.

    The concern is that, javascript isn't essentially required for the changing buttons, you can prefer css instead like in following example:
    http://jsfiddle.net/isdixit/svtD9/
    Everything is Geek


Bookmarks

Posting Permissions

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