ロールオーバーと呼ばれるものです。
マウスオーバーとも呼ばれます。
スタイルシート[CSS]を使う方法(1)
JavaScriptを使わない、IMGタグとスタイルシートだけのロールオーバー
簡単に説明すると、背景にロールオーバー後の画像を置いておき、マウスが重なったときにはIMGを消してしまうという手法です。
背景として画像が読み込まれているのでキャッシュもされます。
Windows IE5〜
Mac IE5
Firefox
Netscape7
Safari
Opera7〜
対応
(〜Opera6はロールオーバーしない)
p {
/*Aタグに高さや幅を指定することが出来ないので親領域で指定する*/
width:100px;
height:40px;
margin:0px;
padding:0px;
}
p a{
/*インライン要素は幅や高さがないのでブロック要素にする*/
display:block;
/*ロールオーバー後の画像を背景に置いておくと、前景が消えたときに表示される*/
background:url(img2.gif) no-repeat;
/*高さや幅はIMGタグにて指定がされているので必要ない*/
/*ここに高さや幅を指定すると、ロールオーバーしない＆IE5でリンクできなくなる*/
/*Firefox1.5以降でリンクをクリックしたときに枠線が出る対策*/
/*MacIEには必要ないので効かせない*/
/* ¥*/
overflow:hidden;
/* */
}
p a img{
/*IMGタグのボーダーを消す*/
border:none;
}
p a:hover img {
/*ロールオーバーしたときにIMGタグの画像を消す*/
/*visibility:hidden;にするとテキストリーダーで読めない*/
/*text-indent:-9999px;が使えるのはIEだけ*/
position:relative;
/*left:-9999px;にするとNetscape7でずれる*/
z-index:-1;
}
p a:hover {
/*IE5でロールオーバーできない対策*/
width:100px;
height:40px;
/*IE5,IE6でロールオーバーが反応しない対策*/
background-color:transparent;
}
サンプル
注意すべきバグ
Windows Internet Explorer 5・6でチラチラする
Windows Internet Explorer 5でロールオーバーしないかつ、クリックしてもリンクできない
Windows Internet Explorer 5でロールオーバーしない
Internet Explorer 5でのバグが見たい場合は
[参考記事] 古いバージョンのInternet Explorerを検証する
標準でvisibility:hidden;にしているパターンもありますが、それだと画像が表示されないときには何も表示されません。
imgをposition: relative;ではなく、
visibility:hidden;
}
とする手法もあります。
サンプル
この手法もまた、ホバー前のAタグにwidthを指定するとWinIE5でクリックできません。
a:hoverにwidthなりを指定しないとWinIE5では画像が変わりません。
Opera6ではロールオーバーしません。
スタイルシート[CSS]を使う方法(2)
IMGタグとpositionを使ったこんな手法もあります。
使う画像はコレです。
表示領域の Pタグにoverflow: hiddenを指定し、position:relativeで Aタグの位置をずらします。
Windows IE5〜
Mac IE5
Firefox
Netscape7
Safari
Opera7〜
対応
(〜Opera6はロールオーバーしない)
問題点(想像通りですが…)
リンクしたときに点線がおかしくなります。
CSSを無効にすると画像がおかしくなります。
p {
overflow: hidden;
width:100px;
height:40px;
/* ¥*/
position:relative;
/* */
/*¥*//*/
display:inline-table;
/**/
}
p a {
display:block;
}
p a:hover {
position:relative;
top:-40px;
}
p a img{
border:none;
}
スタイルシート[CSS]を使う方法(3)
スタイルシートだけのロールオーバー
[参考記事] 画像置き換え法(IR法)によるロールオーバー
画像OFFでも表示される手法に次のようなものがあります。
参考に画像OFFの状態だと下のようになります。
文字の色を画像の下のあたりの領域と同じにして、隠しているだけなので、画像のデザインに制限がありますのでおススメではありません。
p {
/*画像の大きさに領域を確保*/
width:100px;
height:50px;
margin:0;
padding:0;
/*字が大きいときにはみ出さないようにする*/
/*MacIEでは表示が消えるので指定をしないハック*/
/* ¥*/
overflow:hidden;
/* */
}
p a {
/*領域を確保できるようにブロック要素にする*/
display:block;
/*クリックできるよう画像の大きさに領域を確保*/
/*標準準拠では大きいように思えますがoverflow:hiddenで隠れるのでOK*/
width:100px;
height:50px;
margin:0;
/*画像中の模様にかからないように調整*/
padding:20px 0 0 0;
text-align:center;
font-weight:bold;
/*MacIEで文字をある程度は拡大できるよう調整*/
/* ¥*//*/
font-size:12px;
line-height:12px;
/* */
/*画像を指定*/
/*画像OFFの背景色を指定*/
background:url(img.gif) 0 0 no-repeat #300;
/*文字が隠れるよう画像色と同じに指定*/
color:#900;
}
p a:hover {
/*画像を指定*/
/*画像OFFの背景色を指定*/
background:url(img.gif) 0 -50px #66f;
/*文字が隠れるよう画像色と同じに指定*/
color:#006;
}
JavaScriptを使う方法
Macromedia Dreamweaverによる手法です。
JavaScript
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
HTML
<img src="【標準画像名】" name="【一意のID】" border="0" />
</a>
imgとonmouseoverの【一意のID】は対となります。
複数ある場合にはそれぞれを対として、別々のIDを振ります。
この状態だとロールオーバー画像は、ロールオーバーされて初めて閲覧者のパソコンにダウンロードされるので反応が悪くなります。
そこで下記のonLoadをBODYタグに記載して、ページが読み込まれるときに閲覧者のパソコンにキャッシュします。
JavaScript
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
HTML
画像が複数ある場合は「,」で区切って書きます。
