インタラクティブな操作（グラフ→動画，サムネイル）
赤字の部分と青地の部分が，
this.
また，
次はマウスオーバーでサムネイル画像を呼び出しているところです。
function showimg(x)
{
//DIVのID，thum配下にimg要素を作成します。
$("#thum").empty(); // thum要素以下のimgを排除します。
// img要素を動的に作成する。サムネイル画像は事前に作成されているモノとする。
var im = $("<img>").attr("src", "/jikkyou/data/"+ id + "-" + (asec * x) + ".png");
$("#thum").append(im); // DIV配下に追加する。
C
im.css("position", "absolute");
// 表示位置をグラフ上のポインター位置に合わせる。グラフの大きさ（chartwidth）を超えないように
// サムネイルの位置を調整する。256とか20とかの直値は使わない方がいいですね＾＾；
im.css("left", (( chartwidth - 256 ) * (asec * x ) / totaltime ) + 20 );
}
これでグラフ上をマウスオーバーで滑らせることでサムネイルがぱらぱらと変わっていきます。
インタラクティブな操作（動画→グラフ）
以上でグラフから別のオブジェクトへの操作が可能となりました。それでは，
var myvid = $("#myVid")[0];
myvid.addEventListener("timeupdate", function(){
var t = Math.floor(myvid.currentTime); //現在の再生時間を整数に
// chartはHighchartsで作成したグラフ
chart.xAxis[0].removePlotLine("plot-line-1"); //グラフのマーカーを削除
chart.xAxis[0].addPlotLine({
value: myvid.currentTime / asec, // X軸（時間軸）に対して再生位置にマーカーを引く
color: "red",
width: 2,
id: "plot-line-1"
});
// 再生時間がupdateSecで割り切れた場合。多重取得防止。
if ( t % updateSec == 0 && t != tTime )
{
tTime = t;
getRes(); // コメントを取得する。
}
});
実は以前紹介したコメント取得の部分に含まれていたのですが，
動画再生時に都度呼び出されるtimeupdateイベントで，
また，
こんな風になりました
それでは実際のグラフの様子を見てみましょう。
動画は
以上がグラフと動画，
コーディングも楽しくなります。
