Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です）
さて、本題に。
CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。
ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。
jsファイルのご用意
何はともあれ、下記のjsファイルをご用意します。
function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match("_off."))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartRollover);
}
ダウンロードしたい方は以下より。
smartRollover.js
んで、コレを外部ファイルとして読み込ませる。
こんな感じで。
<script type="text/javascript" src="smartRollover.js"></script>
記述する場所はhead要素内でございます。
画像のご用意
通常時の画像と、ロールオーバー時の画像を別々で用意して、以下のようにファイル名の最後に「_on」「_off」とつけます。
- menu_on.gif
- menu_off.gif
ソース
_offの画像をご自由に指定します。
<p> <a href="/"><img src="./menu_off.gif" alt="HOME" /></a> </p>
サンプルページ
仕様とか
JSに関しては殆ど無知なんで、知り合いに頼んで作ってもらった訳でございますが、取りあえず、ファイル名の最後に「_off」ってついてる場合、同名の「_on」のファイルに入れ替わるって感じです。
ですので、間違って_offってファイル名に付けた場合_onを探しにいって×とか出る可能性があるのでご注意を。
サンプルはgifですが、jpgとかpngとかでもOKです。
よく見るロールオーバーのサンプルだとソースがごちゃごちゃしてていけてなかったからJSでのロールオーバーを敬遠してたけど、コレならソースもシンプルなのでいいなーと思った感じです。
ご注意事項とか
- 改変とかはご自由にどうぞ。
- 使用用途に関しても制限無しです。ご自由にどうぞ。
- 万が一コレが原因で何らかの問題が発生しても、ウチでは一切の責任を取りません。
- 使用に関しては自己責任でお願いします。