Using the Chess Viewer Applet

This is a demonstration of some custom features:

• Dark squares have a different color;
• Second game is pre-selected;
• The viewer is enclosed in a bordered box;

Here is the modified CV section of the post body that is producing these results:

<div style="border: 1px solid blue; width: 651px; height: 580px;">
<script id="oChessViewer" style="margin: 10px;" type="text/javascript">
/*
[Event "Munich"]
[Site "Munich"]
[Date "1991.??.??"]
[Round "?"]
.
.
.
1-0
*/
makeChessApplet ( null, { DarkSquares: "C08262", GameToSelect: "2" } );
</script>
</div>

Below are the actual changes along with some explanations and internal processing details:

• The way new parameters are submitted to the Chess Viewer Deluxe applet. Proper values are assigned to two of them (“DarkSquares“ and “GameToSelect“) which are passed in when the “makeChessApplet” function is called. The most common parameters are handled nicely by the “HTML generator” so you don’t have to do it manually (but you could). For a complete list of all possible parameters check the CVD’s home page.
• There is a mandatory ID of “oChessViewer” defined on the SCRIPT element. The ID is later inherited by the chess viewer (CV) object. That's quite convenient and can be used in your CSS (as I do in mine) to define a style that applies to each of the CV objects.
• There is an optional “style” attribute defined on the SCRIPT element which also gets inherited by the CV object. The example makes good use of it to overwrite the current settings for margins (from the CSS).
• The outer box is defined in the most usual HTML fashion and shows how easy the CV object is nested inside it. In fact, the CV object literally replaces the SCRIPT element and, from user’s point of view, the PGN data is naturally inherited by it.