SitePoint Sponsor

User Tag List

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

    Changing the Submit to an image button

    With some great help, in this forum, I am using this Form below for searching.
    I'd like to change the Submit, to an image button. Can you give me an example of how/where I'd make this change?

    Thanks


    Code:
    <form method="get" action="search.php" id="search">
      <div>
        <input type="hidden" name="type" value="images">
        <label for="sbi"><font size="6" color="#999999" face="Arial">Search:</font></label>
        <input type="text" name="keyword" id="sbi">
        &nbsp;<input type="submit" value="Search" name="B2" id="B2">
      </div>
    </form>
    css code:
    Code:
    	#search label {
    	  color:#666;
    	  font:1.4em Arial,sans-serif;
    	 
    	}
    	 
    	#sbi {
    	  font:10pt verdana,sans-serif;
    	  height:1.4em;
    	  width:20em;
    	  color:#000;
    	  border:2px inset #F5F5F5;
    	  background-color:#FFF;
    	  
    	}
    	 
    	#B2 {
    	  font:10pt verdana,sans-serif;
    	  width:7em;
    	  color:#fff;
    	  letter-spacing: 1px;
    	  border: 1px inset #F5F5F5;
    	  background-color: #800000;
    	 
    }

  2. #2
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    With some great help, in this forum, I am using this Form below for searching.
    I'd like to change the Submit, to an image button. Can you give me an example of how/where I'd make this change?

    Thanks

    Chris,

    You need to add a background image to the submission input via CSS.

    Try changing the background properties in #B2 as shown below:
    Code:
        #search label {
          color:#666;
          font:1.4em Arial,sans-serif;
         
        }
         
        #sbi {
          font:10pt verdana,sans-serif;
          height:1.4em;
          width:20em;
          color:#000;
          border:2px inset #F5F5F5;
          background-color:#FFF;
          
        }
         
        #B2 {
          font:10pt verdana,sans-serif;
          width:7em;
          color:#fff;
          letter-spacing: 1px;
          border: 1px inset #F5F5F5;
          background: #800000 url(to/your/image.png);
    }
    Alex

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    733
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    I've tried your suggestion, and several variations of it, without success.
    Any other suggestions would be appreciated.

  4. #4
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I doubt you'll get any other suggestions. What I posted is the proper way to do this...

    If I were you I'd post the code you tried so we can help you troubleshoot it.

    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    This is the way I'd do it:
    Code HTML4Strict:
    <input type="image" name="submit" src="myimage.jpg" alt="Submit" value="Submit">

    In your form:

    Code:
    <form method="get" action="search.php" id="search">
      <div>
        <input type="hidden" name="type" value="images">
        <label for="sbi"><font size="6" color="#999999" face="Arial">Search:</font></label>
        <input type="text" name="keyword" id="sbi">
        <input type="image" name="B2" id="B2" src="myimage.jpg" alt="Search" value="Search">
      </div>
    </form>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Just remember that when you replace a <input type="submit"> button with a <input type="image"> image that the value passed with the form is different. With a button the value of the button is passed with the form. With an image the x and y coordinates of where the mouse clicked on the image are passed instead.
    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="^$">

  7. #7
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Just remember that when you replace a <input type="submit"> button with a <input type="image"> image that the value passed with the form is different. With a button the value of the button is passed with the form. With an image the x and y coordinates of where the mouse clicked on the image are passed instead.
    Right. This is why I recommended using CSS.

    Oh well.

    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K


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
  •