検索機能を付けたhtmlにジャンプ機能を付けたい
いま、下のような状態で作成しています。
<html lung="ja">
<head>
<title>参考資料</title>
</head>
<body>
<!--search-->
<form method="get" action="" name="search">
<div class="search">キーワード検索(キーワード入力>「Search」押下)・・・赤く反転したところが、該当箇所です<br />
<input id="search" name="search" size="20" style="width:300px" class="form" />
<input type="hidden" name="mySearch" value="" />
<input type="button" value="Search" class="button" onClick="javascript:doSearch()" />
</div>
</form>
<pre>
・
・
・
</pre>
<script type="text/javascript" language="javascript">
<!--
// フォント(font = "" などを指定する)
var fontName = "";
// フォントカラー(変更しない場合は、fontColor = "" とする)
var fontColor = "";
// フォントサイズ(単位はpx、変更しない場合は 0 を指定する)
var fontSize = 0;
// 太字(0:太字にしない、1:太字にする)
var isBold = 0;
// 斜体(0:斜体にしない、1:斜体にする)
var isItalic = 0;
// 下線(0:下線をつけない、1:下線をつける)
var isUnderline = 0;
// 背景色(変更しない場合は、backColor = "" とする)
var backColor = "#FF8080";
searchWordHighlighting();
function searchWordHighlighting() {
if (!document.body.createTextRange) return;
var range = document.body.createTextRange();
var searchStr = getSearchStr();
if (searchStr == "") return;
range.collapse(true);
while (range.findText(searchStr)){
if (fontName != "") range.execCommand("fontName", true, fontName);
if (fontSize > 0) range.execCommand("fontSize", true, fontSize);
if (fontColor != "") range.execCommand("foreColor", true, fontColor);
if (isBold != 0) range.execCommand("bold");
if (isItalic != 0) range.execCommand("italic");
if (isUnderline != 0) range.execCommand("underline");
if (backColor != "") range.execCommand("backColor", false, backColor);
range.collapse(false);
}
}
function getSearchStr() {
var urlStr = "" + window.location;
var baseStr = "mySearch=";
var index = urlStr.indexOf(baseStr);
if (index == -1) return "";
urlStr = urlStr.split("%25");
urlStr = urlStr.join("%");
return decodeURIComponent((urlStr.substring(index + baseStr.length)).replace("%25", "%"));
}
function doSearch() {
window.document.search.mySearch.value=encodeURIComponent(window.document.search.search.value);
window.document.search.submit();
}
//-->
</script>
</body>
</html>
これに「Serch」クリック後、該当箇所にジャンプする機能を付けたいです。
教えていただければ幸いです。
宜しくお願いします。
お礼
どちらも新しいものですね。テレビであったとは……,見逃して残念です。 下記DVDケースの写真(舞台の雰囲気)から期待していたのですが, まさか背広姿が出るとは思いもしませんでした。 http://www.hmv.co.jp/product/detail/1429240 DVDケースの写真を見るだけでは分からないものですね。ショックでした。 私には,豊臣秀吉や徳川家康が背広姿で出てくるようなものです。 後で思い出しましたが,カラヤンの映画(ラインの黄金)は観てました。 何か中途半端で変だと思いましたが,背広がなかった点では良かったです。 もっとオペラに慣れれば背広姿も受け入れられるようになるかもしれませんが, 今の時点ではまだ駄目です。将来も,ずっと駄目かもしれません。 しばらくは(ずっと?)背広「無し」にこだわりたいと思っています。 ありがとうございました。