- ベストアンサー
JavaScriptでリンクの背景にある画像をOnMouseOver時
JavaScriptでリンクの背景にある画像をOnMouseOver時に変更する方法がわからなくて困っています。 webページを作っているのですが、OKWaveのサイトの上のタブのように画像を背景とするリンク上にマーカーが来たときにその画像の下部50％を表示するようにしたいのですがうまくいきません。 マーカーがリンク上に無い時には画像の上部50％を表示するようなものにしたいと思っています。 スタイルシートでリンクに指定したidなどで処理したいと思っています。 説明が下手かと思いますが、サンプルコード等を教えてください。
- keeeeeeeen
- お礼率56% (160/282)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
【CSSのみで行なう】 <style type="text/css"> <!-- a{ background-image: url("画像URL"); background-repeat: no-repeat; background-position: left top; /* 左上 */ display: block; /* ブロックレベル表示 */ width: 画像幅px; height: 画像高さの半分px;/*上半分だけ表示*/ overflow: hidden; /* あふれた下半分は隠す */ } a:hover{ background-position: left bottom;/*マウスオーバーしたら下半分を表示*/ } --> </style> </head> <body> <a href="#" title="#">メニュー名</a> </body> </html> 【JavaScript】 <style type="text/css"> <!-- a{ background-image: url("画像URL"); background-repeat: no-repeat; background-position: left top; /* 左上 */ display: block; /* ブロックレベル表示 */ width: 画像幅px; height: 画像高さの半分px;/*上半分だけ表示*/ overflow: hidden; /* あふれた下半分は隠す */ text-decoration:none; } --> </style> <script type="text/javascript"> <!-- function MOver(Obj){ Obj.style.backgroundPosition = "left bottom"; } function MOut(Obj){ Obj.style.backgroundPosition = "left top"; } //--> </script> </head> <body> <a href="#" title="#" onmouseover="MOver(this);" onmouseout="MOut(this)";>メニュー名</a> </body> </html> aのところはCSSのみの場合と同じです。 MOver,MOutの関数名とObjはお好きなように変えてください。 idを使って行ないたい場合は <script type="text/javascript"> <!-- function MOver(id){ document.getElementById(id).style.backgroundPosition = "left bottom"; } function MOut(id){ document.getElementById(id).style.backgroundPosition = "left top"; } //--> </script> </head> <body> <a id="sample" href="#" title="#" onmouseover="MOver('sample');" onmouseout="MOut('sample')";>メニュー名</a> </body> </html> またCSSのみJavaScriptどちらの場合も left bottomのところは left -画像の半分px としても大丈夫です。 例えば画像が200pxの高さなら left -100px わからなかったら、 「画像 ロールオーバー 1枚」でネット検索してみてください。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
CSSならhover時にbackground-positionを移動する感じ。（clipとかもありますが） 例えば、A.jpgの高さが60pxあるとして、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> #sample { list-style:none; margin:0; padding:0; } #sample li a { display:block; width:100px; height:30px; overflow:hidden; background-image:url(A.jpg); background-repeat:no-repeat; } #sample li a:hover { background-position:left bottom; } </style> </head> <body> <ul id="sample"> <li><a href="#">text1</a></li> <li><a href="#">text2</a></li> </ul> </body> </html> javascriptでやっても同じことだけど、hoverを指定する代わりに <ul id="sample" onmouseover="test(event)" onmouseout="test(event)"> などとしておいて、 function test(evt) { var t=evt.target || evt.srcElement; if (t.nodeName != 'A') return; t.style.backgroundPosition = evt.type==='mouseover'?'left bottom':'left top'; } みたいな感じ。 javascriptをOFFにしている場合を考えれば、CSSで行なったほうが良いのでは？ （javascriptならリンクタグでなくても可。hoverの場合はリンクタグでないと効かないブラウザがある） ＞hoverで通常時と異なる画像を設定できるのでしょうか？ 上の例は同じ画像の上部、下部を表示する例ですが、違う画像でも可能です。というか、そちらのほうが多いかも。 （CSSでもjavascriptでも）
お礼
こんなに簡単に書ける何てしりませんでした。 ありがとうございます。
- SAYKA
- ベストアンサー率34% (944/2776)
background-image の指定だね。 http://www.tohoho-web.com/css/reference.htm#background-image jsからcssを操作するならそうなるけれど、そんな事よりもcssで通常時とhoverを指定した方が早い気がするよ・・・ http://www.tohoho-web.com/css/reference.htm#hover
お礼
回答ありがとうございます。 background-imageで画像は指定しています。 hoverで通常時と異なる画像を設定できるのでしょうか？
お礼
おおおお、 a:hover{ background-position:left bottom;/*マウスオーバーしたら下半分を表示*/ } CSSでこんな書き方できるなんて知りませんでした!!できました!!!!!! ありがとうございます。