30 users online (1 members and 29 guests)  


Page 1 of 2 1 2 Last
  Results 1 to 15 of 19

Related

  1. Price calculator    Forum: HTML Forum
    Replies: 1
  2. Inserting system calculator    Forum: HTML Forum
    Replies: 0
  3. code for website calculator    Forum: HTML Forum
    Replies: 2
  4. Replies: 14
  1. #1
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    How do I add an image to a visual calculator?

    I have been trying to create an online calculator for my students to use. The twist is that it is a calculator for money so instead of numbers i need pictures of the coins. My knowledge is pretty basic. I took an online webdesign course and read a lot of other posts but i have not been able to figure this one out. i do know that the picture is in the value but can show only the picture, but using the html img src="picture.gif" does not work. Is this even possible? I am also wondering how to make the display show two decimals no matter what even if it is zero so show .50 instead of .5. I got the code on another forum but here it is. thank you for your help!

    <form name=calc>
    <table>
    <tr><td colspan="3" width="75%"><input name="wtcalc" type="text"></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=''" value="C" name="C" title="C"></td></tr>
    <tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='1'" value="1" name="1" title="1" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='2'" value="2" name="2" title="2" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='3'" value="3" name="3" title="3" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='+'" value="+" name="+" title="+" ></td></tr>
    <tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='4'" value="4" name="4" title="4" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='5'" value="5" name="5" title="5" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='6'" value="6" name="6" title="6" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='-'" value="-" name="-" title="-" ></td></tr>
    <tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='7'" value="7" name="7" title="7" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='8'" value="8" name="8" title="8" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='9'" value="9" name="9" title="9" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='*'" value="*" name="*" title="*" ></td></tr>
    <tr><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='.'" value="." name="." title="." ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='0'" value="0" name="0" title="0" ></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value=eval(calc.wtcalc.value);" value="="></td><td width="25%"><input type="button" onClick="document.calc.wtcalc.value+='/'" value="/" name="/" title="/" ></td></tr>
    </table>
    </form>

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How do I add an image to a visual calculator?

    Hi there dito33,

    and a warm welcome to these forums.
    The twist is that it is a calculator for money so instead of numbers I need pictures of the coins.
    You do not say what currency you are planning to use.

    So if we were to assume it was Dollars, can you tell us what images you envisage would be required to display something like this...
    $1234567.89
    Or perhaps you are planning to restrict your calculator in some way or other to keep the calculated value to display something like this...
    $1.00

  3. #3
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    what I was hoping to do was eliminate some of the rows and use the pictures of coins, quarter, penny, nickel dime, and maybe a dollar bill. instead of the number 1, 2, 3 etc. i know how to change the value and i get it to look like. he is a sample of the code. this in the underline and what i need to change is in the bold.

    onClick="document.calc.wtcalc.value+='.25'" value="1" name="1" title="1"

  4. #4
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    adding the dollar sign as you have would also be a bonus!

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How do I add an image to a visual calculator?

    Hi there dito33,

    you have not really answered my question about the use of images or I may have misunderstood your requirements.
    1. Do you want to replace the button numbers with images?
    2. If so do you want the buttons to just add the face values of the buttons onclick?
    3. Is the result of these additions to be pictorial or numerical?
    4. How large a result do you believe it is possible to represent pictorially?
    5. Do you have the images required for this project?

  6. #6
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    Sorry for the confusion, I am still trying to wrap my head around all of this. I hope these answers help. Thank you again!

    1. Do you want to replace the button numbers with images?yes I would like to replace the number with an image.
    2. If so do you want the buttons to just add the face values of the buttons onclick?Yes
    3. Is the result of these additions to be pictorial or numerical?Numerical. with 2 decimal places even if the second number is a 0. ex. show 1.50 not 1.5. i was also wondering if having a dollar sign "$" in the results
    4. How large a result do you believe it is possible to represent pictorially?Not really sure this applies since I am looking for a numerical representation.
    5. Do you have the images required for this project? Yes i have them saved as *.gif. ex. quarter.gif

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How do I add an image to a visual calculator?

    Hi there dito33,

    If you upload your images to a free site like...
    • http://tinypic.com/

    ..I will see if I can knock up something suitable to your requirements.

    As I am over the pond, I will just have to swat up on the "Dollars and Dimes" now.
    Last edited by HTML; 03-08-2012 at 05:27 PM.

  8. #8
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    the images are on my work pc i will get them tomorrow. thanks

  9. #9
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    Here is the new code and the pictures are below. the pictures will need to go in the bottom columns, the buttons are currently labeled with the respective picture. Thank you again for your help. my students will appreciate it.
    <FORM id=calc name=calc>
    <TABLE>
    <TBODY>
    <TR>
    <TD width="75%" colSpan=3><INPUT name=wtcalc></TD>
    <TD width="25%"><INPUT title=C onclick="document.calc.wtcalc.value=''" value=C type=button name=C></TD></TR>
    <TR>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='1'" value=1 type=button name=1></TD>
    <TD width="25%"><INPUT title=2 onclick="document.calc.wtcalc.value+='2'" value=2 type=button name=2></TD>
    <TD width="25%"><INPUT title=3 onclick="document.calc.wtcalc.value+='3'" value=3 type=button name=3></TD>
    <TD width="25%"><INPUT title=+ onclick="document.calc.wtcalc.value+='+'" value=+ type=button name=+></TD></TR>
    <TR>
    <TD width="25%"><INPUT title=4 onclick="document.calc.wtcalc.value+='4'" value=4 type=button name=4></TD>
    <TD width="25%"><INPUT title=5 onclick="document.calc.wtcalc.value+='5'" value=5 type=button name=5></TD>
    <TD width="25%"><INPUT title=6 onclick="document.calc.wtcalc.value+='6'" value=6 type=button name=6></TD>
    <TD width="25%"><INPUT style="WIDTH: 16px; HEIGHT: 24px" title=- onclick="document.calc.wtcalc.value+='-'" value=- size=16 type=button name=-></TD></TR>
    <TR>
    <TD width="25%"><INPUT title=7 onclick="document.calc.wtcalc.value+='7'" value=7 type=button name=7></TD>
    <TD width="25%"><INPUT title=8 onclick="document.calc.wtcalc.value+='8'" value=8 type=button name=8></TD>
    <TD width="25%"><INPUT title=9 onclick="document.calc.wtcalc.value+='9'" value=9 type=button name=9></TD>
    <TD width="25%"><INPUT style="WIDTH: 17px; HEIGHT: 24px" title=* onclick="document.calc.wtcalc.value+='*'" value=* size=24 type=button name=*></TD></TR>
    <TR>
    <TD width="25%"><INPUT title=. onclick="document.calc.wtcalc.value+='.'" value=. type=button name=.></TD>
    <TD width="25%"><INPUT title=0 onclick="document.calc.wtcalc.value+='0'" value=0 type=button name=0></TD>
    <TD width="25%"></TD>
    <TD width="25%"><INPUT title=/ onclick="document.calc.wtcalc.value+='/'" value=/ type=button name=""></TD></TR>
    <TR>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='20.00'" value="20 dollar bill" type=button name=1></TD>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='10.00'" value="10 dollar bill" type=button name=1></TD>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='5.00'" value="5 dollar bill" type=button name=1></TD>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='1.00'" value="1 dollar bill" type=button name=1></TD></TR>
    <TR>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='0.25'" value=quarter type=button name=1></TD>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='0.10'" value=dime type=button name=1></TD>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='.05'" value=nickel type=button name=1></TD>
    <TD width="25%"><INPUT title=1 onclick="document.calc.wtcalc.value+='.01'" value=penny type=button name=1></TD></TR>
    <TR>
    <TD width="25%"></TD>
    <TD width="25%"></TD>
    <TD width="25%"></TD>
    <TD width="25%">
    <P><INPUT style="WIDTH: 62px; HEIGHT: 28px" onclick=document.calc.wtcalc.value=eval(calc.wtcalc.value); value== size=72 type=button></P>
    <P>&nbsp;</P></TD></TR></TBODY></TABLE></FORM></BODY></HTML>

    http://i41.tinypic.com/35i8vtv.jpg
    http://i39.tinypic.com/2ij2sg3.jpg
    http://i41.tinypic.com/6emagp.jpg
    http://i40.tinypic.com/2pobdl1.jpg
    http://i39.tinypic.com/sv58ie.jpg
    http://i42.tinypic.com/35bt6ye.jpg
    http://i43.tinypic.com/w89kjp.jpg
    http://i42.tinypic.com/1oqg46.jpg
    Last edited by HTML; 03-08-2012 at 05:28 PM.

  10. #10
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How do I add an image to a visual calculator?

    Hi there dito33,

    your coin images show the head side.
    Unfortunately, as a limey, I can not recognize their respective values.

    Can you put values to the image names for me?

    Your images have a variety of dimensions, so how do you want the respective buttons sized?

    Do you want this calculator to add each button's respective value to a running total onclick or do you have some other requirement?

  11. #11
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    http://i39.tinypic.com/sv58ie.jpg-quarter .25
    http://i42.tinypic.com/35bt6ye.jpg-dime .10
    http://i43.tinypic.com/w89kjp.jpg-nickel .05
    http://i42.tinypic.com/1oqg46.jpg-penny .01

    i have not thought much about the button sizes. i am thinking that the calculator will need to take up the full monitor without scrolling. however, i am not too concerned about that right now. I might be able to make adjustments to that later if needed.

    i was hoping these buttons could function much like the rest of the calculator. so that when you press the button you can see the value in the output until it is added.

    so you see 20.00+.50 and then when you press equals you get
    20.50

    I hope that answered your questions. i tend to have a lot going through my mind at one time and don't always clearly express myself.

  12. #12
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How do I add an image to a visual calculator?

    Hi there dito33,

    I have started the calculator and have the " USA cash " part working.

    Before going any further with the javascript for the " main calculator ", I thought that
    you should take a look at it, as it quite possible that it might not suit your requirements.
    • http://www.coothead.co.uk/calculator/

    Click on the show cash button to see the working part.
    Last edited by HTML; 03-08-2012 at 05:26 PM.

  13. #13
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    WOW! That is amazing. it works just fine. would it be possible to show 2 decimal places on the regular calculator. wehre did you learn all of this or recommend someone who would like to learn?

  14. #14
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How do I add an image to a visual calculator?

    Hi there dito33,

    The regular calculator javascript will take a little longer but I will let you know when it is ready for you to test.
    ...where did you learn all of this...
    Believe it or not, I learned " all of this " here and at similar forums.
    Of course, being a compulsive problem solver does help.

    p.s.
    How old are the students that require this thing?

  15. #15
    dito33's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Location
    Rochester, NY USA
    Posts
    12

    Re: How do I add an image to a visual calculator?

    so there is hope for me to learn java and html more. I also love solving problems, hence why i wanted to start this project in the first place.

    I work at an agency for students with special needs, Mary Cariola Children's Center. I teach in a classroom with students 14-21 years old with multiple disabilities most of them do not know the value of coins. We also run a staff convience store and they need quick money skills for that. I may try to adapt this cacluator to help with that and match our inventory.

    Thank you again.



Page 1 of 2 1 2 Last