using image on submit button

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • mallz
    New Member
    • Mar 2007
    • 52
    #1

    using image on submit button

    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.
    Tags: None
    • KevinADC
      Recognized Expert Specialist
      • Jan 2007
      • 4092
      #2
      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.

        Comment

        • mallz
          New Member
          • Mar 2007
          • 52
          #3
          Originally posted by KevinADC
          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?

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              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" />

                Comment

                • mallz
                  New Member
                  • Mar 2007
                  • 52
                  #5
                  Originally posted by drhowarddrfine
                  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.

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      With that CSS in place? Need a link or the code.

                        Comment

                        • mallz
                          New Member
                          • Mar 2007
                          • 52
                          #7
                          Originally posted by drhowarddrfine
                          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...

                            Comment

                            • mallz
                              New Member
                              • Mar 2007
                              • 52
                              #8
                              Originally posted by mallz
                              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..

                                Comment

                                • drhowarddrfine
                                  Recognized Expert Expert
                                  • Sep 2006
                                  • 7434
                                  #9
                                  There must be other markup affecting this. Here's my test page:
                                  Code:
                                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
button{margin:0;padding:0;border:0}
</style>

</head>

<body>
<button type="button" onclick="alert('test');"><img src="1.gif" alt="Exit!!" /> </button>
</body>
</html>

                                    Comment

                                    • KevinADC
                                      Recognized Expert Specialist
                                      • Jan 2007
                                      • 4092
                                      #10
                                      Originally posted by mallz
                                      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?

                                        Comment

                                        • mallz
                                          New Member
                                          • Mar 2007
                                          • 52
                                          #11
                                          Originally posted by KevinADC
                                          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

                                            Comment

                                            • KevinADC
                                              Recognized Expert Specialist
                                              • Jan 2007
                                              • 4092
                                              #12
                                              this should work, no CSS required:

                                              Code:
                                              <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

</head>

<body>
<form><input type="image"
onclick="alert('Wassup?')";
src="frog.gif">
</form>
</body>
                                              replace frog.gif with your image.

                                                Comment

                                                • mallz
                                                  New Member
                                                  • Mar 2007
                                                  • 52
                                                  #13
                                                  Originally posted by KevinADC
                                                  this should work, no CSS required:

                                                  Code:
                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

</head>

<body>
<form><input type="image"
onclick="alert('Wassup?')";
src="frog.gif">
</form>
</body>
                                                  replace frog.gif with your image.
                                                  ive tried this, but, its associated javascript on an <input type="image"> does not function properly.

                                                    Comment

                                                    • drhowarddrfine
                                                      Recognized Expert Expert
                                                      • Sep 2006
                                                      • 7434
                                                      #14
                                                      Then this is a javascript problem and you need to go to that board for this.

                                                        Comment

                                                        • KevinADC
                                                          Recognized Expert Specialist
                                                          • Jan 2007
                                                          • 4092
                                                          #15
                                                          Originally posted by mallz
                                                          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?

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...