実際の画像/画像を使った電卓の作成

-2

html cssとjavascriptで実数画像以上を使用して電卓を作りたいと思います。それを行う方法に関する提案はありますか？イメージマッピングのようなものを使用するのか、それともPhotoshopでカットして、それをパズルのように接続するのですか？実際の画像/画像を使った電卓の作成

（質問が唯一のインターフェイスについてです。正確には、質問がボタンやディスプレイをエンパワーする方法です）

出典

2017-06-19 skaljic1

です。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –

背景位置プロパティを使用して1つの画像しか使用できません。

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

など各ボタン/ div。ここで

は、この質問には広すぎる、意見ベースのいずれかであるかの議論が必要となるので、スタックオーバーフローのためにオフトピックです例

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

出典

2017-06-19 13:25:40 Raj

それはあなたが個別に各画像上のjavascriptのイベントをバインドすることができますので、フォトショップでそれらをカットCUがベストです。

それ以外の場合は、どのボタンがクリックされたかを知るために、クリックのx、yの位置を計算する必要があります。

さらに、CSSだけでボタンのスタイルを設定できます。電卓の場合は、設計によってはそれほど難しくありません。

出典

2017-06-19 13:22:11

実際の画像/画像を使った電卓の作成

答えて

関連する問題