www.webdeveloper.com
Results 1 to 13 of 13

Thread: Image and Form Button

  1. #1
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900

    Image and Form Button

    Can I put an image (16x16) in a form button with out making an image for the login button?

  2. #2
    Join Date
    Nov 2007
    Location
    Ohio
    Posts
    308
    Your question is not very clear... Do you want to place an image inside a button, or use an image as a button?

    You can do both.

    Set an image as a background with styles:

    <style type="text/css">
    .imgButton {
    background: url(image.jpg) no-repeat;
    border: none;
    height: 16px;
    width: 16px;
    }
    </style>
    <input type="submit" name="submit" value="Submit" class="imgButton" />

  3. #3
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    The way this is done is the image shows and the text lays ontop of it. How can I make so there is the image and then next to it is the text?

    This is my code
    .imagebuttonstyle {
    background:#FFFFFF;
    color:#000000;
    font-size:8pt;
    background: url(http://www.mydomain.com/images/lock.png) no-repeat;
    border-width:1px;
    border-style:solid;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    <input class="imagebuttonstyle" name="submit" type="submit" value="Login" />

  4. #4
    Join Date
    Nov 2006
    Posts
    134
    <input class="imagebuttonstyle" name="submit" type="submit" />Login</p>

    just put <p> tags inside the <form> tags

  5. #5
    Join Date
    Nov 2007
    Location
    Ohio
    Posts
    308
    .imagebuttonstyle {
    background:#FFFFFF;
    color:#000000;
    font-size:8pt;
    background: url(http://www.mydomain.com/images/lock.png) no-repeat;
    border-width:1px;
    border-style:solid;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    <input class="imagebuttonstyle" name="submit" type="submit" value="" /> Login

  6. #6
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    goto http://clients.esctonline.com and you will see what I mean

  7. #7
    Join Date
    Nov 2007
    Location
    Ohio
    Posts
    308
    This is assuming your image size is proper (i.e. 16x16 px or whatever fits in your button).

    PHP Code:
    .imagebuttonstyle {
        
    background:#FFFFFF;
        
    color:#000000;
        
    font-size:8pt;
        
    background#FFFFFF url(http://www.mydomain.com/images/lock.png) no-repeat;
        
    background-positionleft;
        
    text-aligncenter;
        
    border-width:1px;
        
    border-style:solid;
        
    font-family:VerdanaGenevaArialHelveticasans-serif;
    }

    <
    input class="imagebuttonstyle" name="submit" type="submit" value="Login" /> 

  8. #8
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    that didnt seem to do the trick

  9. #9
    Join Date
    Nov 2007
    Location
    Ohio
    Posts
    308
    Can I see your actual page?

  10. #10
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    clients.esctonline.com

  11. #11
    Join Date
    Nov 2007
    Location
    Ohio
    Posts
    308
    Ok, can you show me an example of what you are trying to duplicate?

  12. #12
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900
    I want a button to have an image in it

    Button: |[image] Login|

    Right now the button overlaps on the image.

  13. #13
    Join Date
    Nov 2007
    Location
    Ohio
    Posts
    308
    PHP Code:
    <style type="text/css">
    .
    imagebuttonstyle 
        
    background:#FFFFFF; 
        
    color:#000000; 
        
    font-size:8pt
        
    background#FFFFFF url(http://www.mydomain.com/images/lock.png) no-repeat; 
        
    background-positionleft
        
    text-alignright
        
    width100px;/* May need to adjust higher/lower to get expected result */
        
    border-width:1px
        
    border-style:solid
        
    font-family:VerdanaGenevaArialHelveticasans-serif;
        
    }
    </
    style>
    <
    input class="imagebuttonstyle" name="submit" type="submit" value="Login" /> 
    Last edited by sstalder; 12-03-2007 at 11:54 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles