運用レベルでも簡単に増やせる仕様のロールオーバー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タグリンク※影響なし -->

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)