Photoshop Question posted in
The official user guide can be found here.

Making calculator with real image/images – Photoshop

I would like to make a calculator using real image or more of them in html css and javascript. Is there any suggestion on how to do that? Should I use something like image mapping or cut it in photoshop then connect it like a puzzle?

(The question is only about the interface. To be precise, the question is how to empower buttons and display)

Tags:

2

Answers


  1. 0

    It’s best cu cut them in photoshop so you can bind javascript events on each image separately.

    Otherwise you would have to compute x, y position of the click to know which button was clicked.

    Better still is if you can style the buttons with only css. For a calculator it shouldn’t be very hard, depending on the design.

    Login or Signup to reply.
  2. 0

    Well you can use background-position property and use only one image.

    background-position:left top;
background-position:center top;
background-position:right top;

    and so on for each button/div.

    Here’s an example

    <!DOCTYPE html>
<html>
<head>
<style>
div{ 
    background-image: url('https://www.w3schools.com/css/img_fjords.jpg');
    width:100px;
    height:100px;
    background-repeat: no-repeat;
    display:inline-block;
}

div#lt{
background-position: top left; 
}

div#ct{
background-position: top center; 
}

div#rt{
background-position: top right; 
}

div#lc{
background-position: center left; 
}

div#cc{
background-position: center center; 
}

div#rc{
background-position: center right; 
}

div#lb{
background-position:left bottom; 
}

div#cb{
background-position: center bottom; 
}

div#rb{
background-position: right bottom; 
}
</style>
</head>

<body>
<div id="lt"></div>
<div id="ct"></div>
<div id="rt"></div>
<br />
<div id="lc"></div>
<div id="cc"></div>
<div id="rc"></div>
<br />
<div id="lb"></div>
<div id="cb"></div>
<div id="rb"></div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search