月別アーカイブ: 2011年1月

現在URLと指定リンク先が同一のときにクラスthisを自動付与するJS


現在URLとページ内リンクのリンク先URLが同じとき、
いちいち手書きでクラスthisを追加するのが面倒なので、
自動的にthisが付与されるjavascriptを作ってみました。

このjsを追加するだけで、
グローバルナビの反転もテキストリンクの背景付与も
各クラスのa.thisに対してcssでスタイルを定義するだけでよくなります。

▼デモページ
http://www.kuzumi.net/sample/this/

▼html

<p class="cap">■現在のURLと各リンクの指定リンク先が同じ場合、クラス名にthisを追加</p>
<ol id="navi">
<li><a href="http://www.kuzumi.net/sample/this/index.html" class="test">URLパス(http://www.kuzumi.net/sample/this/index.html)</a></li>
<li><a href="/sample/this/index.html" class="test">ルートパス1(/sample/this/index.html)</a></li>
<li><a href="/sample/this/">ルートパス2(/sample/this/)</a></li>
<li><a href="index.html">相対パス1(index.html)</a></li>
<li><a href="./">相対パス2(./)</a></li>
<li><a href="./test.html">現在ページにリンクしていないのでthisが付与されません。</a></li>
</ol>
<ul class="test">
<li><a href="index.html"><img src="btn1.gif" alt="現在ページにリンクしたのでthisが付与されます。" /></a> </li>
<li><a href="test1.html"><img src="btn2.gif" alt="現在ページにリンクしていないのでthisが付与されません。" /></a></li>
</ul>

▼css

<style type="text/css">
p.cap{
	font-size:80%;
}
li{
	margin:20px;
	padding:0;
	font-size:80%;
}
/* thisの付与されたaタグの背景を黄色くする */
a.this{
	background:#ff0;
}
ul.test li a{
	display:block;
	overflow:hidden;
	height:20px;
	width:150px;
	background:url(btn1.gif) no-repeat 0 0;
}
/* ulのクラスtest内のaタグにthisが付与されたら:hover時と同じスタイルを適用する */
ul.test li a.this,
ul.test li a:hover{
	background-position:0 -20px;
}
ul.test li a img{
	display:none;
}
</style>

▼JavaScript

<script type="text/javascript">
window.onload = function() {
var this_url_class = "this"; // 付与したいクラス名を設定
var url = location.href; // 現在URLのパスを変数urlに格納
url = url.replace(/#.*?$/g, ""); // アンカーを含む場合は削除
url = url.replace(//index(s)?.htm(l)?$/g, "/"); // index.html、index.htm、index.shtmlは省略
var re = new RegExp("^" + url + "$"); // match関数用正規表現にurlの値を格納
var anc = document.getElementsByTagName("a"); // ドキュメント内のaタグを取得して変数ancに格納
for(var i=0;i<anc.length;i++){ // 変数ancに格納されたaタグの数だけループ
var link = anc[i].href; // aタグのURLを変数linkに格納
link = link.replace(//index(s)?.htm(l)?$/g, "/"); // index.html、index.htm、index.shtmlは省略
var c = anc[i].className; // aタグのクラス名を変数cに格納
if(link.match(re)){ // 変数linkが変数urlとマッチしたら
if(c != ""){ // aタグに既存のクラス名が存在したら
anc[i].className = c + " " + this_url_class; // 既存のクラス名 + this に書き換える
}else{ // aタグに既存のクラス名が存在しなかったら
anc[i].className = this_url_class; // クラス名thisを付与
}
}
}
} // window.onload
</script>

グローバルナビなどクラスなしでロールオーバーしたい場合のJS


グローバルナビなどでロールオーバーしたい場合、
aタグすべてにclass=”roll_over”など入れたくないですよね。

そこで、ボタンサイズが決まっている場合はクラス名なしでいけて、
ボタンサイズが違う場合も、カテゴリごとのクラス追加だけで済むようにする
親id依存のロールオーバーJSを作ってみました。

▼デモページ
http://www.kuzumi.net/sample/roll_over/sample2.html

▼css

<style type="text/css">
*{
	margin:0;
	padding:0;
}
img{
	border:0;
}
/* ul id="test"内のロールオーバー */
ul#test li a {
	display:block;
	overflow:hidden;
	height:20px;
	width:150px;
}
ul#test li a:hover {
	background-position:0 -20px !important;
}
</style>

▼JavaScript

<script type="text/javascript">
window.onload = function() {
var roll = document.getElementById("test"); // id="test"のデータを変数rollに格納
if(roll != null){ // 変数rollのデータがページ内にあったら
var an = roll.getElementsByTagName("a"); // 変数roll内のaタグリンクをすべて取得
for(var i=0;i<an.length;i++){ // 見つかったaタグリンクの数だけループ
var a = an[i]; // aタグリンクを変数aに格納
var img = a.childNodes[0].src; // aタグリンクの子要素のimgからsrc属性の値を取得して変数imgに格納
var ttl = a.childNodes[0].alt; // aタグリンクの子要素のimgからalt属性の値を取得して変数ttlに格納
if(ttl != ""){ // もし変数ttlが空じゃなかったら
a.title = ttl; // aタグリンクのtitle属性にaltの値を設定(imgがdisplay:noneになりalt属性が表示されなくなるため)
}
a.style.background = "url(" + img + ") no-repeat 0 0"; // aタグリンクの背景スタイルに変数imgの画像パスを設定
a.childNodes[0].style.display = "none"; // aタグリンクの子要素のimgを非表示にして背景を表示
}
}
} // window.onload
</script>

▼html

<ul id="test">
<li><a href="test1.html"><img src="btn1.gif" alt="btn1" /></a></li>
<li><a href="test2.html"><img src="btn2.gif" alt="btn2" /></a></li>
<li><a href="test3.html"><img src="btn3.gif" alt="btn3" /></a></li>
</ul>

もし、各ボタンのサイズが違っている場合は、
liタグにカテゴリにふさわしいクラスを追加して、
それぞれのliタグ内のaタグに対して画像と同じサイズを指定します。

■li class=”about”と指定した場合の追加スタイル
▼css

ul#test li.about a {
	height:10px;
	width:150px;
}
ul#test li.about a:hover {
	background-position:0 -10px !important;
}

floatでボタンを横並びにした場合でも、
横サイズをクラスごとに変更すればOKです。
縦サイズが同じであれば、:hover時のスタイルは共通なので不要です。

運用レベルでも簡単に増やせる仕様のロールオーバーJS


jQueryなしでもできる簡単ロールオーバーを作ってみました。
前回と違い、heightとwidthはcssに記述するようにしました。
メリットは、cssファイルに画像パスを記述しなくていいことと、
プリロードイメージをしなくていいことです。
画像サイズがクラスごとに決まっていればcssにその種類分のスタイルを記述しておけばいくらでも増やせるという仕様です。
自分の仕事用のメモ程度ですが、使えれば使ってみてください。

準備するのは以下の2点。

①ON/OFFを上下1枚に配置した画像を用意する。
▼画像例

②aタグにclass=”roll_over”を指定する。
▼ソースの記述例
<a href="#" class="roll_over"<img src="hoge.gif&quot alt="説明説明説明" /></a>

▼デモページ
http://www.kuzumi.net/sample/roll_over/sample1.html

▼css

<style type="text/css">
img{
	border:0;
}
ul {
	list-style:none;
}
/* 通常のロールオーバー */
a.roll_over {
	display:block;
	overflow:hidden;
	height:20px;
	width:150px;
}
a.roll_over:hover {
	background-position:0 -20px !important;
}
/* ul id="test"内のロールオーバー */
ul#test li a.roll_over {
	height:100px;
	width:200px;
}
ul#test li a.roll_over:hover {
	background-position:0 -100px !important;
}
/* ul class="test2"内のロールオーバー */
ul.test2 li a.roll_over {
	height:50px;
	width:200px;
}
ul.test2 li a.roll_over:hover {
	background-position:0 -50px !important;
}
/* p class="test"内のロールオーバー */
p.test a.roll_over {
	height:30px;
	width:200px;
}
p.test a.roll_over:hover {
	background-position:0 -30px !important;
}
</style>


▼JavaScript

<script type="text/javascript">
window.onload = function() {
var tg = "roll_over"; // ロールオーバー用クラスを設定
var an = document.getElementsByTagName("a"); // ドキュメント内のaタグリンクをすべて取得
for(var i=0;i<an.length;i++){ // 見つかったaタグリンクの数だけループ
var ac = an[i].className; // aタグのクラス名を取得
if(ac.match(tg)){ // もし取得したクラス名に変数tgに設定したクラス名が含まれている場合実行
var a = an[i]; // aタグリンクを変数aに格納
var img = a.childNodes[0].src; // aタグリンクの子要素のimgからsrc属性の値を取得して変数imgに格納
var ttl = a.childNodes[0].alt; // aタグリンクの子要素のimgからalt属性の値を取得して変数ttlに格納
if(ttl != ""){ // もし変数ttlが空じゃなかったら
a.title = ttl; // aタグリンクのtitle属性にaltの値を設定(imgがdisplay:noneになりalt属性が表示されなくなるため)
}
a.style.background = "url(" + img + ") no-repeat 0 0"; // aタグリンクの背景スタイルに変数imgの画像パスを設定
a.childNodes[0].style.display = "none"; // aタグリンクの子要素のimgを非表示にして背景を表示
}
}
} // window.onload
</script>

▼html

<!-- ul id="test"内のclass="roll_over"の場合 -->
<ul id="test">
<li><a href="test.html" class="roll_over test"><img src="roll_over_h200.gif" alt="あああああ" /></a></li>
</ul>
<!-- ul id="test"内のclass="roll_over"の場合 -->
<!-- ul class="test2"内のclass="roll_over"の場合 -->
<ul class="test2">
<li><a href="test.html" class="roll_over"><img src="roll_over_h100.gif" alt="あああああ" /></a></li>
</ul>
<!-- ul class="test2"内のclass="roll_over"の場合 -->
<!-- p class="test"内のclass="roll_over"の場合 -->
<p class="test"><a href="test.html" class="roll_over"><img src="roll_over_h60.gif" alt="あああああ" /></a></p>
<!-- p class="test"内のclass="roll_over"の場合 -->
<!-- class="roll_over"のみの場合 -->
<a href="test.html" class="roll_over"><img src="roll_over.gif" alt="あああああ" /></a>
<!-- class="roll_over"のみの場合 -->
<!-- 通常のaタグリンク※影響なし -->
<p><a href="test.html"><img src="roll_over.gif" alt="あああああ" /></a></p>
<!-- 通常のaタグリンク※影響なし -->