掲示板/総合質問板/過去ログ/一覧/ a name でジャンプした先の　背景色を変えたい

0 名前： ななみ ： 2007/05/11（金） 20:46 ID:f7p6ETfB sub-.G: name と # で　特定の項目にジャンプするようにしています。
ただ　幾つかの項目が横に並んでいますので　「この項目！」と　はっきり分かるように
背景色を変えたいと考えました。
a:active を試してみましたが　ジャンプしただけでは　色は変わりませんでした。

そのようなことは　可能でしょうか？
それについて調べるには　どのような言葉で検索すればよろしいのでしょうか？

IE や Netscape では　その項目が点線で囲まれるので少しは分かりやすいのですが
もっと目立つようにしたいのです。
あの点線は　どのような仕組みで現れているのでしょう？

探し方が分からなく行き詰っております。
どうぞ　よろしくお願いいたします。

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/11（金） 20:46 ［URL］ ID:Ehfvypix sub-r2: id属性を使って、アンカがのonclick属性値に該当の要素の背景色を変える、というJavaScriptを書くのが良いかとは思いますが、レイアウト次第です。

> name と # で　特定の項目にジャンプするようにしています。
> ただ　幾つかの項目が横に並んでいますので　

このページが拝見できれば、もっと具体的な提案ができるかもしれません。

2 名前： ななみ ： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G: カヅサツさん　お返事ありがとうございました。
URL に書かせていただきました。　よろしくお願いいたします。

「JavaScriptを書く」　というのは　私には出来ませんが
それ以外の方法は有りませんでしょうか？

3 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/11（金） 20:46 ［URL］ ID:lF4.cd1a sub-gm

> それ以外の方法は有りませんでしょうか？

私は思いつきません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<script type="text/javascript">
function ChAncStyle(obj){
	//id属性値がsub-sectionAncである要素内にある a要素を、subSectionAncとする
	var subSectionAnc = document.getElementById("sub-section").getElementsByTagName("a");
	//subSectionAncの数だけ処理
	for (var i = 0; i < subSectionAnc.length; i++) {
		全a要素のスタイルを元に戻す
		subSectionAnc[i].style.Color = "blue";
		subSectionAnc[i].style.borderWidth = "0px";
	}
	
	//href属性値を # の前後で分割し、その後の方を取り出して ancId とする
	var ancId = obj.href.split("#")[1];
	//alert(ancId);
	document.getElementById(ancId).style.Color = "red";
	document.getElementById(ancId).style.borderColor = "red";
	document.getElementById(ancId).style.borderStyle = "solid";
	document.getElementById(ancId).style.borderWidth = "3px";
}
</script>
</head>
<body>
<hr><hr><hr><hr><hr>
    <div id="sub-section">
      <dl><dt><a href="../2006/061124.html" title="2006年 白侘助" id="T0107">白侘助</a></dt>
        <dd class="name">シロワビスケ</dd>
        <dd class="photo"><a id="N0107"
        name="N0107" href="jpg/tsubaki0107.jpg"
        class="highslide"
        onclick="return hs.expand(this, {align: 'center'})"
        onkeypress="return hs.expand(this, {align: 'center'})">
                          <img src="jpg/tsubaki01-07.jpg"
                          alt="白侘助" title="Click to enlarge" width="100" height="80"></a>
                          <div class="highslide-caption" id="caption-for-N0107">(略)</div></dd></dl>
      <dl><dt><a href="../2007/070213.html" title="2007年 数寄屋侘助" id="T70201">数寄屋侘助</a></dt>
        <dd class="name">スキヤワビスケ</dd>
        <dd class="photo"><a id="N70201"
        name="N70201" href="http://www.nagominoniwa.net/blog/070201.jpg"
        class="highslide"
        onclick="return hs.expand(this, {align: 'center'})"
        onkeypress="return hs.expand(this, {align: 'center'})">
                          <img src="http://www.nagominoniwa.net/blog/070201-thumb.jpg"
                          alt="数寄屋" title="Click to enlarge" width="100" height="80"></a>
                          <div class="highslide-caption" id="caption-for-N70201">(略)</div></dd></dl>
    </div>
    <div id="list">
    <h4>鉢植えの椿</h4>
      <ul>
        <li><a href="#T0107"> 白侘助</a></li>
        <li><a href="#T70201"> 数寄屋侘助</a></li>
      <ul>
    </div>
<script type="text/javascript">
//id属性値がlistである要素内にある a要素を、listAncとする
var listAnc = document.getElementById("list").getElementsByTagName("a");
//listAncの数だけ処理
for (var i = 0; i < listAnc.length; i++) {
	listAnc[i].onclick = function(){
		ChAncStyle(this);
	}

}
</script>

<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
</body>
</html>

4 名前： ななみ ： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G: カヅサツさん　お返事ありがとうございました。
お手数をかけて申し訳ありません。

気をつけてコピーしたつもりですが　エラーが出たりして色も変わりません。
どこかコピーする場所を間違っておりますでしょうか？
スタイルシートは　sub-section と list の「.」を「#」に書き換えるだけで
よかったのでしょうか？

それと　このファイルには　sub-section と list が一つずつしか有りませんが
同じパターンの別のファイル（tsubaki02～05）には　それぞれ二つ以上あるものもございます。
その場合　sub-section2 とか list2 とかにすればよろしいのでしょうか？

何度も申し訳ありませんが　よろしくお願いいたします。

5 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/11（金） 20:46 ［URL］ ID:lF4.cd1a sub-gm

> 気をつけてコピーしたつもりですが　エラーが出たりして色も変わりません。

すいません。コメントが//ではじまっていませんでした。

		全a要素のスタイルを元に戻す

↓

		//全a要素のスタイルを元に戻す

6 名前： ななみ ： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G

カヅサツさん　お返事ありがとうございました。
真っ赤なボーダーが現れるようになり　はっきり目立つようになりました。

つめて沢山並べましたので　特に下の方にジャンプした時　下がりきらなくて
「どれ？」と　探さなくてはなりませんでした。
ジャンプした意味が無いように感じておりました。

ただ　ボーダーですと　その高さのために並び方が乱れますので　背景色を
変えたいと思い　調べて　BackColor を見つけて書き換えてみました。

	//href属性値を # の前後で分割し、その後の方を取り出して ancId とする
	var ancId = obj.href.split("#")[1];
	//alert(ancId);
	document.getElementById(ancId).style.Color = "red";
	document.getElementById(ancId).style.borderColor = "red";
	document.getElementById(ancId).style.borderStyle = "solid";
	document.getElementById(ancId).style.borderWidth = "3px";

と書かれていたのを

	//href属性値を # の前後で分割し、その後の方を取り出して ancId とする
	var ancId = obj.href.split("#")[1];
	//alert(ancId);
	document.getElementById(ancId).style.Color = "red";
	document.getElementById(ancId).style.BackColor = "red";

と書き換えましたが　何も変わらなくなりました。

背景色を変えるには　どのように書けばよろしいのでしょうか？
よろしくお願いいたします。

7 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/11（金） 20:46 ［URL］ ID:lF4.cd1a sub-gm: BackColor ではなく、 backgroundColor であります。

8 名前： ななみ ： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G: カヅサツさん　何度もすみませんでした。

おかげさまで　思い通りの形になりました。　ありがとうございます。
真っ赤では　さすがに目立ちすぎますので　左ボーダーと同じ色に変えました。

BackColor については　全くの早とちりで　お恥ずかしいことです。
「.style.borderWidth」　で検索して出てきたページで　そのすぐ上に
BackColor が有ったので　「これだ！」　と思ってしまいました。
読み返してみますと　「Web サーバー・・・」　と書かれてました。

お手数をかけて　本当に申し訳ありませんでした。

9 名前： ななみ ： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G

何度も　すみません。
JavaScript の方でお尋ねしようかとも考えましたが　引き続き　ということで
こちらに書かせていただきました。

その後　JavaScript を書く位置を変えました。
html のあちこちに書いていたものを　</body> の下にまとめて書きました。
その状態では　同じように動いておりました。

ただ　同じまとめるなら外部ファイルにしよう！　と思い　作ってみました。

	hs.registerOverlay(
    	{
    		thumbnailId: null,
    		overlayId: 'controlbar',
    		position: 'bottom left',
    		hideOnMouseOut: true,
    		opacity: 0.75
		}
	);
	
    hs.graphicsDir = 'http://www.nagominoniwa.net/sakuin/highslide/highslide/graphics/';
    window.onload = function() {
        hs.preloadImages(5);
    }
function ChAncStyle(obj){
	var subSectionAnc = document.getElementById("sub-section").getElementsByTagName("a");
	for (var i = 0; i < subSectionAnc.length; i++) {
		subSectionAnc[i].style.Color = "blue";
		subSectionAnc[i].style.borderWidth = "0px";
	}
	
	var ancId = obj.href.split("#")[1];
	document.getElementById(ancId).style.color = "#3e443f";
	document.getElementById(ancId).style.backgroundColor = "#e3bd7b";
}
document.write('<div id="highslide-container"><\/div>');
document.write('<div id="controlbar" class="highslide-overlay controlbar">'
+ '<a href="javascript:void(0)" onclick="return hs.previous(this)" onkeypress="return hs.previous(this)" title="前の画像"><\/a>'
+ '<a href="javascript:void(0)" onclick="return hs.next(this)" onkeypress="return hs.next(this)" title="次の画像"><\/a>'
+ '<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move" style="margin-left: 10px"><\/a>'
+ '<a href="javascript:void(0)" onclick="hs.close(this)" onkeypress="hs.close(this)" title="Close"><\/a>'
+ '<\/div>');
var listAnc = document.getElementById("list").getElementsByTagName("a");
for (var i = 0; i < listAnc.length; i++) {
	listAnc[i].onclick = function(){
		ChAncStyle(this);
	}

}

すると　エラーが出ました。

　document.getElementById("...") は Null またはオブジェクトではありません。

外部ファイルに書く時は　違った書き方をしなければならないのでしょうか？
どうぞ　よろしくお願いいたします。

10 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/11（金） 20:46 ［URL］ ID:O5hEMlpW sub-r2

var listAnc = document.getElementById("list").getElementsByTagName("a");
for (var i = 0; i < listAnc.length; i++) {
	listAnc[i].onclick = function(){
		ChAncStyle(this);
	}
}

この部分を呼び出すscript要素は、id属性値が list である要素より後でなければダメですよ。

もしくは、この部分を関数に入れて、windowが読み込まれたらその関数を起動とか。

11 名前： ななみ ： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G

カヅサツさん　お返事ありがとうございました。

<script type="text/javascript">
<!--
//id属性値がlistである要素内にある a要素を、listAncとする
var listAnc = document.getElementById("list").getElementsByTagName("a");
//listAncの数だけ処理
for (var i = 0; i < listAnc.length; i++) {
	listAnc[i].onclick = function(){
		ChAncStyle(this);
	}

}
//-->
</script>

を　後ろに書いて　同じ動きになりました。　ありがとうございました。

ただ　できれば外部ファイルにまとめておきたいと思っております。
ご厚意に甘えるようで　本当に申し訳ないのですが
「この部分を関数に入れて、windowが読み込まれたらその関数を起動」する書き方
（外部ファイルに書ける書き方）を　教えていただけませんでしょうか？

どうぞ　よろしくお願いいたします。

12 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/11（金） 20:46 ［URL］ ID:O5hEMlpW sub-r2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<script type="text/javascript">
function ChAncStyle(obj){
	//id属性値がsub-sectionAncである要素内にある a要素を、subSectionAncとする
	var subSectionAnc = document.getElementById("sub-section").getElementsByTagName("a");
	//subSectionAncの数だけ処理
	for (var i = 0; i < subSectionAnc.length; i++) {
		//全a要素のスタイルを元に戻す
		subSectionAnc[i].style.color = "blue";
		subSectionAnc[i].style.backgroundColor = "transparent";
	}
	
	//href属性値を # の前後で分割し、その後の方を取り出して ancId とする
	var ancId = obj.href.split("#")[1];
	document.getElementById(ancId).style.color = "#3e443f";
	document.getElementById(ancId).style.backgroundColor = "#e3bd7b";

}
function SetListAnc(){
	//id属性値がlistである要素内にある a要素を、listAncとする
	var listAnc = document.getElementById("list").getElementsByTagName("a");
	//listAncの数だけ処理
	for (var i = 0; i < listAnc.length; i++) {
		listAnc[i].onclick = function(){
			ChAncStyle(this);
		}
	}
}
window.onload = function(){
	SetListAnc();
}
</script>
</head>
<body>
<hr><hr><hr><hr><hr>
    <div id="sub-section">
      <dl><dt><a href="../2006/061124.html" title="2006年 白侘助" id="T0107">白侘助</a></dt>
        <dd class="name">シロワビスケ</dd>
        <dd class="photo"><a id="N0107"
        name="N0107" href="jpg/tsubaki0107.jpg"
        class="highslide"
        onclick="return hs.expand(this, {align: 'center'})"
        onkeypress="return hs.expand(this, {align: 'center'})">
                          <img src="jpg/tsubaki01-07.jpg"
                          alt="白侘助" title="Click to enlarge" width="100" height="80"></a>
                          <div class="highslide-caption" id="caption-for-N0107">(略)</div></dd></dl>
      <dl><dt><a href="../2007/070213.html" title="2007年 数寄屋侘助" id="T70201">数寄屋侘助</a></dt>
        <dd class="name">スキヤワビスケ</dd>
        <dd class="photo"><a id="N70201"
        name="N70201" href="http://www.nagominoniwa.net/blog/070201.jpg"
        class="highslide"
        onclick="return hs.expand(this, {align: 'center'})"
        onkeypress="return hs.expand(this, {align: 'center'})">
                          <img src="http://www.nagominoniwa.net/blog/070201-thumb.jpg"
                          alt="数寄屋" title="Click to enlarge" width="100" height="80"></a>
                          <div class="highslide-caption" id="caption-for-N70201">(略)</div></dd></dl>
    </div>
    <div id="list">
    <h4>鉢植えの椿</h4>
      <ul>
        <li><a href="#T0107"> 白侘助</a></li>
        <li><a href="#T70201"> 数寄屋侘助</a></li>
      <ul>
    </div>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr>
</body>
</html>

ただ、ななみさんのページだど、windowが読み込まれるまでちょっと時間がかかって塩梅が良くないかなぁ、と想像しています。

13 名前： ななみ ： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G: カヅサツさん　お返事ありがとうございました。
おかげさまで　外部ファイルにまとめることが出来ました。

遅くなる可能性については　想像もしませんでした。
同じパターンのファイルが五つ有りますので　外部ファイルを共用できれば
少しは早くなるだろうと思っておりました。
他のファイルも書き直して　様子を見て　考えてみることにいたします。

カヅサツさんには　一から十まで書いていただいて　申し訳なく　
何も出来ない自分自身が情けなく　口惜しい思いをしております。
この思いを　「勉強してみよう！」という意欲に変えられるとよろしいのですけれど・・・

いろいろお手数をかけて　本当に申し訳有りませんでした。
ありがとうございました。

14 名前： カヅサツ ◆ThCi95HEzw ： 2007/05/11（金） 20:46 ［URL］ ID:O5hEMlpW sub-r2: > 同じパターンのファイルが五つ有りますので　外部ファイルを共用できれば
> 少しは早くなるだろうと思っておりました。

それでしたら、>>11だけを別の外部ファイルにして、それを呼び出すscript要素をid属性値が list である要素の直後あたりに置くとよろしいかと思います。

15 名前：匿名： 2007/05/11（金） 20:46 ［URL］ ID:f7p6ETfB sub-.G: カヅサツさん　ありがとうございます。

五つのファイルと外部ファイルを書き直しました。
速さについては　よくわかりませんが　望み通りになっております。

何度もお手数をかけて申し訳ありませんでした。
ありがとうございました。

16 名前： ななみ ： 2007/05/11（金） 20:46 ID:f7p6ETfB sub-.G: すみません。　名前を書くのを忘れました。　15は　ななみ　です。

a name でジャンプした先の 背景色を変えたい

a name でジャンプした先の　背景色を変えたい