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. I am not able to fix this, and so I start doubting if this is the right technique for html image virtualization. I am really no specialist in the area of creating websites, so I would really appreciate 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 couldn’t find any nice examples or tutorials on that.
Unless I’m missing anything, you don’t need to use any image slices, or any images at all to get this effect. This could all be done in plain CSS.
Heres a rough example of how this could be achieved:
http://jsfiddle.net/Curt/wxFtJ/