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

Thread: image-button

  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image-button

    I wolud like to change the type="buttons" to a button/image i made. The first row i tried but it doesnt work.

    Code:
    <html>
    <head>
     
      <title>JavaScript Kalkulator</title>
    
    </head>
    <body>
    
    <form name="kalkulator">
    
    <table border=0 align=center cellpadding=0 cellspacing=5 bgcolor="purple" bordercolor=#FFFFFF summary="">
    	<tr>
    		<td colspan=4><Input name="zaslon" type="text" value=""></td>
    		</tr>
    	<tr>
    		<td><input type="image" src="7.png" value="7" onclick="stevilka(7)"></td>  
    		<td><input type="image" src="8.png" value="8" onclick="stevilka(8)"></td>
    		<td><input type="image" src="9.png" value="9" onclick="stevilka(9)"></td>
    		<td><input type="image" src="deljeno.png" value="/" onclick="deljenje('/')"></td>
    		<td><input type="image" src="c.png" value="CE" onclick="pocisti()"></td>
    	</tr>
    	<tr>
    		<td><input type="button" value="4" onclick="stevilka(4)"></td>
    		<td><input type="button" value="5" onclick="stevilka(5)"></td>
    		<td><input type="button" value="6" onclick="stevilka(6)"></td>
    		<td><input type="button" value="*" onclick="mnozenje('*')"></td>
    		<td><input type="button" value="+" onclick="plus('+')"></td>
    	</tr>
    	<tr>
    		<td><input type="button" value="1" onclick="stevilka(1)"></td>
    		<td><input type="button" value="2" onclick="stevilka(2)"></td>
    		<td><input type="button" value="3" onclick="stevilka(3)"></td>
    		<td><input type="button" value="-" onclick="minus('-')"></td>
    		</tr>
    	<tr>
    		<td><input type="button" value="0" onclick="stevilka(0)"></td>
    		<td><input type="button" value="+/-" onclick="pm()"></td>
    		<td><input type="button" value="." onclick="vejica()"></td>
    		<td><input type="button" value="=" onclick="prikazi()"></td>
    	</tr>
    </table>
    </form>
    <script type="text/javascript">
    
    var zapis = document.kalkulator.zaslon;	//skrajsaj 
    
    function pocisti() //funkcija resetira-pobrise izpise na zaslonu
    {
    zapis.value ='';
    }
    
    function stevilka(x) //funkcija izpise stevilo na zaslonu
    {
    zapis.value += x;
    }	
    
    function plus()  //funkcija izpise plus
    {
    zapis.value += '+';	
    }
    
    function minus()   //... minus
    {
    zapis.value +=	'-';
    }
    
    function mnozenje()	//... krat
    {
    zapis.value += '*';	
    }
    
    function deljenje()	//... deljenje
    {
    zapis.value += '/';
    }
    
    function vejica() //...vejico
    {
    zapis.value +='.';
    }
    
    function pm() //funkcija pomnozi x z -1
    {
    zapis.value *= -1;
    }
    
    function prikazi() //funkcija prikaze rezultat
    {
    zapis.value = eval(krajse.value);
    }
    
    </script>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    image buttons submit

    so just use an image

    <td><img src="7.png" value="7" onclick="stevilka(7)"></td>
    <td><img src="8.png" value="8" onclick="stevilka(8)"></td>
    <td><img src="9.png" value="9" onclick="stevilka(9)"></td>
    <td><img src="deljeno.png" value="/" onclick="deljenje('/')"></td>
    <td><img src="c.png" value="CE" onclick="pocisti()"></td>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, it works execept "=" it doesnt show the result.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can probably still use an image button by adding the return false on the end. The button shouldn't actually submit, it should do what you tell it to in the onclick. Personally I like styling buttons using CSS.
    Code:
    <input type="image" src="7.png" value="7" onclick="stevilka(7);return false">
    You might even be able to use
    Code:
    <button onclick="stevilka(7)" value="7"><img src="7.png" alt="7"></button>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well the bug was in the script, so it works now with the vwphillips way to.

    thx both

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by _Aerospace_Eng_
    You can probably still use an image button by adding the return false on the end. The button shouldn't actually submit, it should do what you tell it to in the onclick. Personally I like styling buttons using CSS.
    Code:
    <input type="image" src="7.png" value="7" onclick="stevilka(7);return false">
    You might even be able to use
    Code:
    <button onclick="stevilka(7)" value="7"><img src="7.png" alt="7"></button>
    Yes, except that I guess that you need to return false for button's handler as well. It looks like button is an interseting choise, as it offers extended possiblitities to render:
    http://www.w3.org/TR/html4/interact/forms.html#h-17.5
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Ahh didn't know <button></button> actually submitted.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi Aero,

    Ahh didn't know <button></button> actually submitted.
    This is only true if the attribute type="submit" is applied.
    Also note that type="reset" can be used.

    coothead

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by coothead
    Hi Aero,

    This is only true if the attribute type="submit" is applied.
    Also note that type="reset" can be used.

    coothead
    I said I guess, as long as W3C said button do anything input type="image" will do... I should have tested, I reckon... On the other hand I confess that I thought, till some mounths ago, that button is deprecated... I have by chance discovered that in fact it could be an intresting form's control. Thanks coothead for the "reset" tip.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Kor,
    Thanks coothead for the "reset" tip.
    I only discovered that 'info' a couple of hours ago in my reference book.

    coothead

  • #11
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    yeap I see that in W3C recs now... I see also that there is a type="button" as well, so that a <button type="button"></button> will act exactly like an <input type="button"> control
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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