だるかぶ
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
ロールオーバー｜CSS HappyLife と言う記事を発見したので試してみました。
HTML ソース
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript でロールオーバーするサンプル</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<script type="text/javascript" src="./smartRollover.js"></script>
</head>
<body>
<p><img src="menu_.gif" /></p>
</body>
</html>JavaScript ソース
// smartRollover.js
// http://css-happylife.com/log/javascript/000157.shtml
function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match(/_\./)){
fileName = new Array(images[i].getAttribute("src").replace("_.", "_o."));
preImages = new Array();
for (j=0; j<fileName.length; j++){
preImages[j] = new Image();
preImages[j].src = fileName[j]; // 画像をプリロード
}
}
if(images[i].getAttribute("src").match(/_\./))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_.", "_o."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_o.", "_."));
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartRollover);
}画像の名前を変更
リンク先の記事で、ロールオーバー前の画像名は *_on.gif に、ロールオーバー後の画像名は *_off.gif にすべしと書いてあるのですが、Fireworks で画像を作る時にスライス名を指定しにくいので、
-
*_.gif
-
*_o.gif
とかのファイル名で動作する様に書き換えてみました。
ファイル名の末尾をアンダーバーにするのは好みの分かれる所かと思いますが、こう言ったファイル名を付ける人は少ないかな？と言う前提で…。別に *_r.gif と *_r_o.gif とか、*_ro.gif と *_ro_o.gif とかでも問題は無いと思います。
Fireworks の設定変更
それから Fireworks の [ ファイル ] – [ HTML の設定 ] を下記に変更。
これでロールオーバーしたいスライス名の末尾にアンダーバーを付加して、普通にページを作れば自動的にロールオーバーしてくれて便利。
プリロードの設定追加
最後に Le Arche | JavaScriptメモ(３)：しんぷるロールオーバー（追記：2007.6.29） を参考にプレロードする様に書き換えてみた所、正常にプレロードしているみたい。
CSS HappyLife さま、Le Arche さまに感謝。
考える事とか注意点とかやりたい事とか
-
JavaScript でロールオーバーさせた画像は Dreamweaver の依存ファイルでアップロードできなくなるので注意。
-
Daniel Nolan – Home と言う手法もあるみたいなんだが、どちらの手法が良いんだろう？
-
誤動作防止のため、画像にリンクが設定されている＆ロールオーバー用のイメージが用意されている場合にのみ、ロールオーバーが発動できれば良いのになぁ。
現場からは以上です。それでは、またッ！！！
だるかぶ