이미지에서 웹 양식을 만들기위한 적절한 HTML 기술

Question

내 웹 사이트 (XHTML) 용 대화식 골프 스코어 카드를 만들 계획입니다. (Btw. 그 스코어 카드가 어떻게 보이는지 : ScoreCard). 따라서 결국 웹 사이트의 가상 스코어 카드에있는 적절한 입력 필드의 각 구멍에 점수를 삽입 할 수 있어야합니다. 필자의 경우 대화 형 스코어 카드가 원본 (스코어) 스코어 카드와 실제로 똑같아 보이는 것이 중요하므로 내 첫 번째 방법은 스코어 카드 이미지를 스캔하여 조각화하여 해당 모양에 도달하는 것이 었습니다.

:

아이디어는 각 필드는이 같은 뭔가 결말 점수를위한 HTML 텍스트 입력을 삽입했다 : 여기

내가 이미지를 슬라이스하는 방법을 볼 수 있습니다

이미지를 잘라낸 후 HTML을 사용하여 이미지를 재구성했습니다. 이를 위해 이미지 조각을 셀 배경으로 넣습니다.

<table> 
    <tr> 
    <td style="background: url("slice1.jpg") width="58px" height="25px"> 
     <input type="text"></inputText> 
    </td> 
    </tr> 
    ... 
</table> 

처음에는이 기능이 훌륭했습니다 (김프가이 기능을 제공함). 그렇다면 정확한 레이아웃을 만들기 위해 HTML 테이블을 만들어야한다는 것이 문제였습니다. 보시다시피 레이아웃의 하단 부분은 3 개의 열로 나뉩니다. 가운데 열은 여러 개의 (각 구멍에 대해) 행으로 나뉩니다. 따라서 왼쪽 열과 오른쪽 열은 해당 행에 걸쳐 있어야합니다. 좋아, 마침내 그 효과가 있지만, 스케일링 문제의 일종으로 이어집니다. 테이블을 확대 또는 축소하면 중간 열 (및 해당 열만)이 올바르게 조정되지 않습니다. Iam은이를 고칠 수 없으므로 이것이 html 이미지 가상화에 적합한 기술인지 의심 스럽습니다. Iam은 실제로 웹 사이트를 만드는 분야에 전문가가 없으므로이 문제에 대해 어떤 도움을주게 될 것입니다. 어쩌면 웹 크리에이션에서 흔히 볼 수있는 일이라고 생각하기 때문에 다른 방법으로는 더 좋은 방법이 될 수 있습니다. 나는 그 어떤 좋은 예나 헛소리도 못 찾았습니다.

Answer 1

내가 무엇을 놓치지 않는 한,이 효과를 얻으려면 이미지 조각이나 이미지를 사용할 필요가 없습니다. 이것은 모두 평범한 CSS로 할 수 있습니다. Heres는

이 달성 할 수있는 방법의 거친 예 :

http://jsfiddle.net/Curt/wxFtJ/

Answer 2

당신은 하나의 행 및 배경 이미지와 하나 개의 큰 셀이 하나 개의 테이블은 이제 있습니다. 당신이 당신의 HTML 테이블과 같이 할 뜻 :

<table> 
<tr> 
<td colspan="3">One row</td> 
</tr> 
<tr> 
<td colspan="3">One row</td> 
</tr> 
<tr> 
<td colspan="3">One row</td> 
</tr> 
<tr> 
<td colspan="3">One row</td> 
</tr> 
<tr> 
<td><input type="text"></td> 
<td><input type="text"></td> 
<td><input type="text"></td> 
</tr> 
<tr> 
<td><input type="text"></td> 
<td><input type="text"></td> 
<td><input type="text"></td> 
</tr> 
<tr> 
<td><input type="text"></td> 
<td><input type="text"></td> 
<td><input type="text"></td> 
</tr> 
<tr> 
<td><input type="text"></td> 
<td><input type="text"></td> 
<td><input type="text"></td> 
</tr> 
<tr> 
<td><input type="text"></td> 
<td><input type="text"></td> 
<td><input type="text"></td> 
</tr> 
</table> 

기본 HTML 테이블 스타일에 읽어주십시오 http://www.w3.org/TR/CSS2/tables.html

또한, 당신은 정말 테이블을 만들 수있는 이미지를 슬라이스는 안된다.