2022/01/22
将棋世界の付録、通常は、1図/1ページ なのだが、2図/1ページ の場合がある。
1図/1ページ の場合は、問題図をクリックすれば、問題図と解説が見開きで現れるようにしたのだった。
しかし、2図/1ページ の場合、解説ページは
のように、該当部分のみを表示するのがいいと思われた。
clip-path: を使って表示することになったのだが、 パラメータの指定を間違っていたためにエラい苦労をした。コンマで区切るものだとばっかり思っていたら、スペースとコンマの組み合わせだった。delphi での プログラムに慣れているので、デリミタは、1種類と思い込んでいた。
css のソースは
img.clipSouth{
width: 100%;
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
また、問題部分でも、ページの上部と下部に、別のリンクを張るのがまたワカラナかった。
Net で調べても、usemap を使うとか JQuery を使うとかばかりでよくわからなかった。時間ばかり掛かって埒があかないので基本から考えてみたら、あまりに簡単に実装できた。独学の無駄な時間だった。
まあ、topmenu が表示出来なくなってしまうことがあるが、またの機会にしよう。
ちなみに、問題部分の html のソースは以下のようにシンプル
<div class="diaArea">
<img class="wd100" src="41.jpg" >
<a href="#p41n"> <div class="north" id="o13"> </div></a>
<a href="#p41s"> <div class="south" id="o14"> </div></a>
</div>
<a href="#p43"><img class="wd100" id="o15" src="43.jpg"></a>
