I plan
to create an interactive golf score card for my website (XHTML). (Btw. thats
how such a scorecard looks like: ScoreCard). So at the end one should be able
to insert a score for each hole in the appropriated input field in the virtual scorecard on the website. For me it is very important that the interactive scorecard really looks the same as the original (paper-) scorecard does and so my first approach was
to scan and slice the scorecard image
to reach that appearance.
Here you can see the way I sliced the image:
The idea was
to insert HTML text input for each score field ending up with something like this:
After I sliced the image I reconstructed it using the HTML .
To do that I put the image slices as the cell background.
<table>
<tr>
<td style="background: url("slice1.jpg") width="58px" height="25px">
<input type="text"></inputText>
</td>
</tr>
...
</table>
At the first moment this worked fine (as Gimp offers quite a nice feature for this). Then the problem was that I had
to create a HTML table
to create the exact layout. As you can see the lower part of the layout is split up into 3 columns. The middle column is split up into several (for each hole) rows. So the left and right column have
to be spanned over those rows. Ok finally that worked, but it lead
to some kind of scaling problem. If I zoom in or out on the table the middle column (and only that one) is not scaled the right way. Iam not able
to fix this, and so I start doubting if this is the right technique for html image virtualization. Iam really no specialist in the area of creating websites, so I would really appriciate any help on this. Maybe there is a complete other and better technique
to do that, as I think it is a common job in webcreation. I couldnt find any nice examples or tuts on that.
