💡📝H. G. Muller wrote on Tue, Sep 13, 2016 05:48 PM UTC:
OK, here it comes! Copy the text below to a file, ad save it on your computer as 'trial.html'. If you then open that file with your browser it should show an interactive diagram for Elven Chess. Then you can try replacing the diagram definition inside the file (the pink part) by what you get from the Design Wizard for your own variant. You will have to change the definition of graphicsDir to http://www.chessvariants.com/graphics.dir/alphaerie , (i.e. replace the ".." in the location by the URLof the CVP website) and the link to the JavaScript source (in the first line) to http://www.chessvariants.com/membergraphics/MSinteractivedia/betza.gif (or leave that line in place, as it is already written that way in the HTML below).
Note that in this context the legend belonging to the diagram is not hidden below it, but placed openly next to it.
This is caused by the presence of a 'table' element with id="pieceTable" (highlighted in green) elsewhere on the page.
<div id="rules" style="display:none">
<h1>Elven Chess</h1>
<div onclick="OpenDiv('rules')">
<p><a href="http://http://www.chessvariants.org/index/msdisplay.php?itemid=MSelvenchess">Elven Chess</a>
is a Chess variant on a 10x10 board that features four new pieces next to the usual FIDE set.
HERE YOU CAN PUT A LONG DESCRIPTION OF THE RULES
</p><p>
<u>Less</u>...
</p>
</div>
</div>
<table cellpadding="20" border="0"><tr><td valign="bottom">
<p id="message">Move by click-click or drag-drop:</p>
<p onclick="OpenDiv('rules')">
Pawns promote on reaching the last 3 ranks, to Q, R, B or N.
It is forbidden to trade Warlocks.<br>
<u>More</u>...
</p>
<table id="pieceTable" border="1"></table>
<p onclick="OpenDiv('betza')">
Click here to define your own piece moves
</p>
<div id="betza" style="display: none">
<p>
<i>Type a move definition below, and then click<br>
on the move above you want to replace.</i>
</p>
Betza string: <input type="text" id="definition" name="Betza" onkeydown="if(event.keyCode == 13)DefinePiece(0);">
</div>
</td></tr><tr><td colspan="2">
OK, here it comes! Copy the text below to a file, ad save it on your computer as 'trial.html'. If you then open that file with your browser it should show an interactive diagram for Elven Chess. Then you can try replacing the diagram definition inside the file (the pink part) by what you get from the Design Wizard for your own variant. You will have to change the definition of graphicsDir to http://www.chessvariants.com/graphics.dir/alphaerie , (i.e. replace the ".." in the location by the URLof the CVP website) and the link to the JavaScript source (in the first line) to http://www.chessvariants.com/membergraphics/MSinteractivedia/betza.gif (or leave that line in place, as it is already written that way in the HTML below).
Note that in this context the legend belonging to the diagram is not hidden below it, but placed openly next to it. This is caused by the presence of a 'table' element with id="pieceTable" (highlighted in green) elsewhere on the page.
<html>
<head>
<title>Elven Chess applet</title>
</head>
<body>
<div id="rules" style="display:none">
<h1>Elven Chess</h1>
<div onclick="OpenDiv('rules')">
<p><a href="http://http://www.chessvariants.org/index/msdisplay.php?itemid=MSelvenchess">Elven Chess</a>
is a Chess variant on a 10x10 board that features four new pieces next to the usual FIDE set.
HERE YOU CAN PUT A LONG DESCRIPTION OF THE RULES
</p><p>
<u>Less</u>...
</p>
</div>
</div>
<table cellpadding="20" border="0"><tr><td valign="bottom">
<p id="message">Move by click-click or drag-drop:</p>
<script type="text/javascript" src="http://www.chessvariants.com/membergraphics/MSinteractivedia/betza.gif"></script>
<div style="float:left;margin:0 40px 20px 0;">
<div id="diagram">
files=10
ranks=10
promoZone=3
promoChoice=NBRQ
graphicsDir=http://www.chessvariants.com/graphics.dir/alfaerie/
whitePrefix=w
blackPrefix=b
graphicsType=gif
squareSize=54
symmetry=none
pawn::::a3,b3,c3,d3,e3,f3,g3,h3,i3,j3,,a8,b8,c8,d8,e8,f8,g8,h8,i8,j8
knight::::b2,i2,,b9,i9
bishop::::c2,h2,,c9,h9
rook::::a1,j1,,a10,j10
queen::::f2,,e9
king::::f1,,e10
warlock::::e2,,f9
elf::BW:promotedbishop:g2,,d9
goblin::RF:promotedrook:d2,,g9
dwarf::K:man:a2,j2,,a9,j9
</div></div>
<p>
<input type="button" onclick="FlipView()" value="Flip View">
<input class="step" type="button" onclick="Seek(0)" value="|<">
<input class="step" type="button" onclick="Seek(10001)" value="<">
<input class="step" type="button" onclick="Seek(10002)" value=">">
<input class="step" type="button" onclick="Seek(10003)" value=">>">
<input class="step" type="button" onclick="Seek(10000)" value=">|">
</p>
<h2 id="players">Elven Chess: local game</h2>
</td><td valign="top" width="150">
<p onclick="OpenDiv('rules')">
Pawns promote on reaching the last 3 ranks, to Q, R, B or N.
It is forbidden to trade Warlocks.<br>
<u>More</u>...
</p>
<table id="pieceTable" border="1"></table>
<p onclick="OpenDiv('betza')">
OTHER STUFF YOU MIGHT WANT TO HAVE ON THE PAGEClick here to define your own piece moves
</p>
<div id="betza" style="display: none">
<p>
<i>Type a move definition below, and then click<br>
on the move above you want to replace.</i>
</p>
Betza string: <input type="text" id="definition" name="Betza" onkeydown="if(event.keyCode == 13)DefinePiece(0);">
</div>
</td></tr><tr><td colspan="2">
</td></tr></table>
</body>
</html>