JavaScriptロールオーバー(ホバー)時の画像を簡単に表示させるjs
を「ソースがシンプルなJSによるロールオーバー｜CSS HappyLife」から紹介します。
サイト制作時に便利なのでメモ的にエントリです。
僕は画像のロールオーバーは主にCSSで設定していたんですが、特にCSSで設定しなくてもいいんじゃないか。
という時に非常に便利なJavaScriptです。
webサイトを制作するにあたって、画像のロールオーバーは必須ですよね。
(色を変化させたり)
それがとてもソースがシンプルで軽いJavaScriptで動作します。
■作業手順は以下のように
- まずはjsをダウンロード先でダウンロード(もしくは下記のjsソースをコピー)
- そのjsを外部ファイルとして読み込ませる。
- 画像の用意。
- htmlにソースを記入。
■jsをダウンロード
■ソースがシンプルなJSによるロールオーバー｜CSS HappyLife からダウンロードしてください。
■もしくは下記のソースをコピーしてください。
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);
}
■そのjsを外部ファイルとして読み込ませる。
<script type="text/javascript" src="smartRollover.js"></script>
■画像の用意。
ここを間違えないように！
通常時の画像と、ロールオーバー時の画像を別々で用意して、以下のようにファイル名の最後に「_on」「_off」とつけます。
ロールオーバー時が 「menu_on.gif」
通常時の画像 「menu_off.gif」
という感じですね。
■htmlにソースを記入
以下のように記入してください。
<a href="/"><img src="images/menu_off.gif" /></a>
以上です。
非常に簡単ですのでテクニックのひとつとして覚えておいて損はないはず！
■注意点
リンクしていようとなかろうと、ロールオーバー時に画像は変わってしまうので、ロールオーバーしたくない画像には
「_on」「_off」をつけないように。