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.
