2017年10月10日

MathJaxの数式にリンクを貼る方法

応援クリックを1日1回宜しくお願いいたします。



MathJaxの数式


\[ \sin x=\sum_{n=0}^\infty\frac{\left(-1\right)^nx^{2n+1}}{\left(2n+1\right)!} \] このように$\mathrm{\TeX}$のコマンドをHTML内に記述すると、数式を表示するJavaScriptライブラリがMathJaxです。

この数式をクリックしたときに別のページに飛べるようにリンクを貼る方法です。



MathJaxの数式全体にリンクを貼る方法


クリックするとページをジャンプする範囲を数式全体とするならば、数式全体を<a>タグでマークアップすればよいです。

数式のどこをクリックしてもジャンプ(遷移)します。

サンプル

\[ \sin x=\sum_{n=0}^\infty\frac{\left(-1\right)^nx^{2n+1}}{\left(2n+1\right)!} \]

ソース





文章中の数式も同様です。

サンプル

我々の目的は $\displaystyle\sin x=\sum_{n=0}^\infty\frac{\left(-1\right)^nx^{2n+1}}{\left(2n+1\right)!}$ を導くことにあった。


数式の一部の箇所にリンクを貼る方法


MathJaxの数式中にHTMLタグを用いることは不可です。

そこで、「\cssId{id}{数式}」を使います。

これを使うと、数式中の一部にid属性を付与できるようになります。

そして、JavaScriptからまるで<span id="id">数式</span>であるかのように扱うことができます。

コマンドの名前は「cssId」ですが、CSS以外にもJavaScriptの関数を付加できるようになります。

関数はonclickやonmouseoverなどで設定します。




そして、onloadか、</body>タグの直前でリンクのように見せます(CSS、JS)。



この場合、「abcの法則」という青い文字にマウスを乗せると下線が引かれ、クリックすると新しいタブ(リンク元がiframe内にある場合、新しいウィンドウ)でリンク先(linesegment.web.fc2.com)を表示します。

ただし、このままでは実際の<a>タグのリンクと違って、マウスを乗せても矢印が指のアイコンになりません。







実際の使用例はこちらです。

『楕円関数論』第四章37. $\wp$関数との関係

この例では、最初から下線が引かれていて、マウスを乗せたときにリンク先にある数式をその場に表示するようにもしています。


タグ:MathJax web IT 数式


posted by Line Segment at 18:00 | Comment(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。