Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I change the picture of a submit button?

    I have this button in my code that submits a form and takes me to the next page:

    <input type="submit" class="input" value="Register"></form>

    Now, I wanted to change the picture of the button, so I changed the code to this:

    <input type="submit" class="input" value="Register" src="images/button2.gif"></form>

    However, the picture is not changed, and it will no longer submit the form.

    Any suggestions?


    Thanks

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Code:
    <input type="image" value="register" src="images/button2.gif">
    http://www.w3schools.com/tags/tag_input.asp
    http://www.w3schools.com
    http://www.htmldog.com

    BTW, your page is way messed up in Firefox and Safari. I'd suggest taking some time to go through some of these basic tutorials and cleaning up some of your code.

  • #3
    Daf
    Daf is offline
    Regular Coder
    Join Date
    Feb 2005
    Location
    East Texas
    Posts
    140
    Thanks
    32
    Thanked 2 Times in 2 Posts
    Hi,

    "src=" won't work - try using inline css instead:

    style="background-image: url(images/button2.gif)"

    So the whole thing would look like this:

    <input type="submit" class="input" value="Register" style="background-image: url(images/button2.gif)"></form>

    Hope this helps.

    Daf

    (EDIT: oops - sorry, I'm a bit too late - Richard beat me to it. Please delete if necessary)

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried those and they didn't work. HOWEVER, I think I found my main problem. I have modified this page, and even the original register button does not work any more. Could someone please take a look at this code and see if they can find why the register doesn't submit?

    Code:
    <!-- Begin_switch_logged_out -->
      <tr> 
        <td height="300" width=100% align="center" bgcolor="#FFFFFF"><div id="scroll" style="height:100%; overflow-y: auto; SCROLLBAR-FACE-COLOR: #2B638C; SCROLLBAR-3DLIGHT-COLOR: black; SCROLLBAR-DARKSHADOW-COLOR: black>
    	<FORM action="register.php" method="get"> 
          <p><font face="Arial, Helvetica, sans-serif"><br>
            <font color="#173147" size="5" face="Eurostile">Pick Your <strong>FREE</strong> Gift:</font></font></p>
          <table width="80%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
            <!--
    			<tr>
    				<td width="16%" class="choice">
    				<img src="images/ipodphoto.gif" border="0"><br />
    				40GB iPod Photo<br /><input type="radio" name="item" value="40GB iPod Photo" checked>
    				</td>
    
    				<td width="16%" class="choice">
    				<img src="images/paypal.gif" border="0"><br />
    				$450 Paypal<br /><input type="radio" name="item" value="$450 Paypal">
    				</td>
    
    				<td width="16%" class="choice">
    				<img src="images/webcertificate.gif" border="0"><br />
    				$450 WebCertificate<br /><input type="radio" name="item" value="$450 WebCertificate">
    				</td>
    
    				<td width="16%" class="choice">
    				<img src="images/money.gif" border="0"><br />
    				$450 Check<br /><input type="radio" name="item" value="$450 Check">
    				</td>
    			</tr>
    -->
            <tr> 
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,1)" onmouseout="hideTip()"><img src="images/mp3.gif" width="141" height="133" style="border: 2px solid #B8CCDC"><br /><a onmouseover="">
                  Nike Runners MP3<br />
                  <input type="radio" name="item" value="1">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,2)" onmouseout="hideTip()"> <img src="images/dvd.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  DVD/VHS Player/Recorder<br />
                  <input type="radio" name="item" value="2">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,3)" onmouseout="hideTip()"> <img src="images/cam.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Kodak 5MP Digital Camera<br />
                  <input type="radio" name="item" value="3">
                </p>
                <p>&nbsp; </p></td>
            </tr>
            <tr> 
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,4)" onmouseout="hideTip()"> <img src="images/radar.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Escort Radar Detector<br />
                  <input type="radio" name="item" value="4">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,5)" onmouseout="hideTip()"> <img src="images/xbox.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Xbox Bundle<br />
                  <input type="radio" name="item" value="5">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,6)" onmouseout="hideTip()"> <img src="images/pay250.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  $250 PayPal<br />
                  <input type="radio" name="item" value="6">
                </p>
                <p>&nbsp; </p></td>
            </tr>
            <tr> 
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,7)" onmouseout="hideTip()"> <img src="images/surround.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Surround Sound System<br />
                  <input type="radio" name="item" value="7">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,8)" onmouseout="hideTip()"> <img src="images/car-cd.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Premier Car Receiver<br />
                  <input type="radio" name="item" value="8">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,9)" onmouseout="hideTip()"> <img src="images/camcorder.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Digital8 Camcorder<br />
                  <input type="radio" name="item" value="9">
                </p>
                <p>&nbsp; </p></td>
            </tr>
            <tr> 
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,10)" onmouseout="hideTip()"> <img src="images/radeon.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Radeon X800 Pro<br />
                  <input type="radio" name="item" value="10">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,11)" onmouseout="hideTip()"> <img src="images/portdvd.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Portable DVD Player<br />
                  <input type="radio" name="item" value="11">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice">  
                <p><a onmouseover="doTooltip(event,12)" onmouseout="hideTip()"><img src="images/print.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  All-in-One Printer<br />
                  <input type="radio" name="item" value="12">
                </p>
                <p>&nbsp; </p></td>
            </tr>
            <tr> 
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,13)" onmouseout="hideTip()"> <img src="images/tv.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover="">
                  Flat Screen TV<br />
                  <input type="radio" name="item" value="13">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,14)" onmouseout="hideTip()"> <img src="images/palm.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Palm Pilot and GPS Handheld<br />
                  <input type="radio" name="item" value="14">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,15)" onmouseout="hideTip()"> <img src="images/pay450.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  $450 PayPal<br />
                  <input type="radio" name="item" value="15">
                </p>
                <p>&nbsp; </p></td>
            </tr>
            <tr> 
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,16)" onmouseout="hideTip()"> <img src="images/thumps.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  Oakley Thumps<br />
                  <input type="radio" name="item" value="16">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice">
                <p> <a onmouseover="doTooltip(event,17)" onmouseout="hideTip()"> <img src="images/pmp.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover="">
                  PMP-140<br />
                  <input type="radio" name="item" value="17">
                </p>
                <p>&nbsp; </p></td>
              <td width="16%" class="choice"> 
                <p><a onmouseover="doTooltip(event,18)" onmouseout="hideTip()"> <img src="images/dvdcamcorder.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /><a onmouseover=""> 
                  DVD Camcorder<br />
                  <input type="radio" name="item" value="18">
                </p>
                <p>&nbsp; </p></td>
            </tr>
            <tr> 
              <td width="16%" class="choice"> <a onmouseover="doTooltip(event,19)" onmouseout="hideTip()"> 
                <img src="images/bose.gif" width="141" height="133" style="border: 2px solid #B8CCDC"><br /> <a onmouseover=""> Bose 
                Music System<br /> <input type="radio" name="item" value="19"> </td>
              <td width="16%" class="choice"> <a onmouseover="doTooltip(event,20)" onmouseout="hideTip()"> 
                <img src="images/laptop.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /> <a onmouseover=""> 
                Laptop<br /> <input type="radio" name="item" value="20"> </td>
              <td width="16%" class="choice"> <a onmouseover="doTooltip(event,21)" onmouseout="hideTip()"> 
                <img src="images/project.gif" width="141" height="133" border="0" style="border: 2px solid #B8CCDC"><br /> <a onmouseover=""> 
                Xbox Projector<br /> <input type="radio" name="item" value="21"> </td>
            </tr></center>
          </table>
          <p>&nbsp;</p>
          <tr> </tr>
    </table>
    <table width="760" height="84" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="FFFFFF" style="border-right:1px solid #000000; border-left:1px solid #000000; border-top:1px solid #000000;">
      <tr> 
        <td width="380" height="83" bgcolor="FFFFFF" style="border:0px;"><img src="images/RightColColored2.gif" width="380" height="100%"></td>
        <td width="378" bgcolor="7AA0BD" style="border:0px;">
    <blockquote>
            <p align="center"><font size="4" face="Eurostile">{REFERRAL_EMAIL} </font><br />
              <font size="4" face="Eurostile">Your E-Mail:</font> 
              <input type="text" class="input" name="email" size="25">
                <input type=hidden value="{REFERRAL}" name=referral>
               <input type="submit" class="input" value="Register"></form>
              </p>
              </blockquote>
            
          </blockquote></td>
      </tr>
    </table>
    <!-- End_switch_logged_out -->
    
    <!-- Begin_switch_logged_in -->
    	<tr>
    		<td width="10%">
    		</td>
    
    		<td width="80%" class="box">
    		<center>
    				<B>Welcome back to {SITE_TITLE}, {USERNAME}!<BR>
            		Below you can see your status for your free {PRODUCT}.</B>
    
    
    		</center>
    		</td>
    
    		<td width="10%">
    		</td>
    	</tr>
    
    	<tr>
    		<td colspan="3">
    		<br />
    		</td>
    	</tr>
    
    	<tr>
    		<td width="10%">
    		</td>
    
    		<td width="80%" class="box">
    		<center>
    			{USER_COMPLETED_OFFER}
    		</center>
    		</td>
    
    		<td width="10%">
    		</td>
    	</tr>
    
    	<tr>
    		<td colspan="3">
    		<br />
    		</td>
    	</tr>
    
    	<tr>
    		<td width="10%">
    		</td>
    
    		<td width="80%" class="box">
    		<center>
    Referrals:<hr>{REFERRALS}
    
    		</center>
    		</td>
    
    		<td width="10%">
    		</td>
    	</tr>
    	<!-- End_switch_logged_in -->
    As far as the other browsers looking bad, thanks for telling me. I downloaded mozilla firefox and you were right, the scroll bar area doesn't work. I will try to tackel that problem after this one.


    Thanks

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The register button works okay for me, as in it's sending the contents to the page specified in the <form> action.

    I can't really tell what the hell's going on with the rest of the page, though. I don't mean to be rude, but there is way more wrong than a scrollbar not showing up. There's no DOCTYPE, incorrectly nested tags, tags placed outside of your <html> tags, wrong declarations on stylesheets, wrong attributes on elements... the validator picked up 313 errors on your homepage alone.

    I'm sorry, but if you don't spend a little time on the basics I can't see the rest of this page coming together any easier for you.

  • #6
    Regular Coder
    Join Date
    Jan 2005
    Posts
    148
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do not know if this means anything, but I have put together the header.tpl index.tpl, and footer.tpl in an html file and changed it around alittle. When I preview it, it shows up perfectly in both IE and firefox. The next step is to take the one html file, and cut and paste the parts that go into header,index,and footer.tpl

    The html file is viewed without the index.php file however, so the code from that might mess it up


  •  

    Posting Permissions

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