...

View Full Version : image-button



solata
06-04-2006, 10:55 PM
I wolud like to change the type="buttons" to a button/image i made. The first row i tried but it doesnt work.


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

vwphillips
06-05-2006, 12:05 AM
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>

solata
06-05-2006, 06:16 AM
Thanks, it works execept "=" it doesnt show the result.

_Aerospace_Eng_
06-05-2006, 06:23 AM
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.

<input type="image" src="7.png" value="7" onclick="stevilka(7);return false">
You might even be able to use

<button onclick="stevilka(7)" value="7"><img src="7.png" alt="7"></button>

solata
06-05-2006, 04:15 PM
well the bug was in the script, so it works now with the vwphillips way to.

thx both :thumbsup:

Kor
06-05-2006, 04:53 PM
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.

<input type="image" src="7.png" value="7" onclick="stevilka(7);return false">
You might even be able to use

<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

_Aerospace_Eng_
06-05-2006, 08:46 PM
Ahh didn't know <button></button> actually submitted.

coothead
06-05-2006, 09:07 PM
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

Kor
06-05-2006, 10:40 PM
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.

coothead
06-05-2006, 10:51 PM
Hi there Kor,

Thanks coothead for the "reset" tip.
I only discovered that 'info' a couple of hours ago in my reference book. :o :o :o

coothead

Kor
06-06-2006, 07:45 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum