汎用性のあるロールオーバーを作成します。
例として閉じるボタンを作成します。
画像は、「close.gif
」と「close_mo.gif
」を用意します。
img要素にname属性を指定しておきます。
これを利用して画像の置き換えを行います。
名前付けの注意点として、予約語は避けます。
例えばここでいう閉じるボタンにname="close"
とすると正常に動作しません。
<a href="javascript: window.close();"><img name="close_button" src="close.gif" alt="閉じる" onmouseover="swap_image(this.name, this.src);" onmouseout="swap_image(this.name, this.src);"></a>
次に画像を入れ替えるJavaScript
function swap_image(name, src)
{
var extension, toSrc, newImage;
if(src.indexOf("_mo") != -1)
{
toSrc = src.replace("_mo.", ".");
}
else
{
extension = src.substr(src.length - 3);
toSrc = src.replace("." + extension, "_mo." + extension);
}
newImage = new Image();
newImage.src = toSrc;
eval("document."+name+".src = '"+newImage.src+"';");
}
これだけでも一応完成ですが、ボタン画像を新しくした場合等 続きを読む…»