By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,657 Members | 1,045 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,657 IT Pros & Developers. It's quick & easy.

using image on submit button

P: 52
hi,
i want to use an image on my submit button, but im having problems with it, as it does not execute the javascript associated with it.
For example, this is my exit button:

<input type="image" name="exit" src="images/exit.jpg" border="0" onClick="window.close();">

When, i click on in, a window pops-up asking confirmation to exit or not, even if i say no, it goes back to the previously opened page. im having the same problem with other submit buttons when i use <input type=image>

Is there any other way i can put an image using <input type=submit> itself?
Please help.
Apr 26 '07 #1
Share this Question
Share on Google+
15 Replies


KevinADC
Expert 2.5K+
P: 4,059
You could try using an image as the background for a submit button. It may not look the same as an actual <intput type=image> but it would probably be close. The problem you described is typical of javascript to close a window or do other things, it leaves control to the user and not the javascript otherwise webpages could take control of your web surfing like the bad old days when pop-up after pop-up would take you all over the internet and you could barley prevent it from happening.
Apr 26 '07 #2

P: 52
You could try using an image as the background for a submit button. It may not look the same as an actual <intput type=image> but it would probably be close. The problem you described is typical of javascript to close a window or do other things, it leaves control to the user and not the javascript otherwise webpages could take control of your web surfing like the bad old days when pop-up after pop-up would take you all over the internet and you could barley prevent it from happening.

hi,
i did a lot of searching regarding this, and i found that <button type=submit>
can be used.

<button type=submit ><img src="images/go.gif" border="0" alt="Continue to the next page" /> </button>
but,i am getting a grey boxed border around the image, how can i make it disappear.
also, from where do i call my javascript code?
Apr 26 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
In your css:

button{
margin:0;
padding:0;
border:0;
}

Not a javscript guy but:
<button type=submit onclick="alert('hello')"><img src="image.png" border="0" alt="Continue to the next page" />
Apr 26 '07 #4

P: 52
In your css:

button{
margin:0;
padding:0;
border:0;
}

Not a javscript guy but:
<button type=submit onclick="alert('hello')"><img src="image.png" border="0" alt="Continue to the next page" />
hi, it is calling its associated javascript code, but im still getting a boxed rectangular grey border around my image.
Apr 26 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
With that CSS in place? Need a link or the code.
Apr 26 '07 #6

P: 52
With that CSS in place? Need a link or the code.
yes, with the css...............and the code u posted......
i tried putting an id, and identifying it but it still does not work...
Apr 26 '07 #7

P: 52
yes, with the css...............and the code u posted......
i tried putting an id, and identifying it but it still does not work...
here is what i used:
<button type="button" onClick="window.close();"><img src="images/exit.jpg" border="0" alt="Exit!!" /> </button>
ive called my css file in the head section with the code uve posted..
Apr 26 '07 #8

drhowarddrfine
Expert 5K+
P: 7,435
There must be other markup affecting this. Here's my test page:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7. button{margin:0;padding:0;border:0}
  8. </style>
  9.  
  10. </head>
  11.  
  12. <body>
  13. <button type="button" onclick="alert('test');"><img src="1.gif" alt="Exit!!" /> </button>
  14. </body>
  15. </html>
Apr 26 '07 #9

KevinADC
Expert 2.5K+
P: 4,059
hi, it is calling its associated javascript code, but im still getting a boxed rectangular grey border around my image.
what browser and browser version are you using?
Apr 26 '07 #10

P: 52
what browser and browser version are you using?
hi, i tried the sample program u had posted, but im having the same problem.
im using Internet Explorer, version 6.0
Apr 27 '07 #11

KevinADC
Expert 2.5K+
P: 4,059
this should work, no CSS required:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <form><input type="image"
  11. onclick="alert('Wassup?')";
  12. src="frog.gif">
  13. </form>
  14. </body>
replace frog.gif with your image.
Apr 27 '07 #12

P: 52
this should work, no CSS required:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <form><input type="image"
  11. onclick="alert('Wassup?')";
  12. src="frog.gif">
  13. </form>
  14. </body>
replace frog.gif with your image.
ive tried this, but, its associated javascript on an <input type="image"> does not function properly.
Apr 27 '07 #13

drhowarddrfine
Expert 5K+
P: 7,435
Then this is a javascript problem and you need to go to that board for this.
Apr 27 '07 #14

KevinADC
Expert 2.5K+
P: 4,059
ive tried this, but, its associated javascript on an <input type="image"> does not function properly.

Works fine for me in IE6, IE7 and FF2. Do you have javascript disabled maybe?
Apr 27 '07 #15

P: 1
hi, it is calling its associated javascript code, but im still getting a boxed rectangular grey border around my image.
just put background-color in your css to match the color of the body and thats it:

button{
background-color:#FFFFFF;
margin:0;
padding:0;
border:0;
}
Nov 19 '07 #16

Post your reply

Sign in to post your reply or Sign up for a free account.