Changing the Submit to an image button

[ChrisjChrisj]

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

<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:

	#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;
	 
}

[Alex]

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:

    #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

[ChrisjChrisj]

Thanks for your reply.
I've tried your suggestion, and several variations of it, without success.
Any other suggestions would be appreciated.

[Alex]

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

[kohoutek]

This is the way I'd do it:

<input type="image" name="submit" src="myimage.jpg" alt="Submit" value="Submit">

In your form:

<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>

[felgall]

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.

[Alex]

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