- ベストアンサー
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で通常時と異なる画像を設定できるのでしょうか？
関連するQ&A
- 背景画像にリンク
背景に画像を固定して表示したページに、リンクを貼りたいのです。 フレームページで縦に２分割、左のページにスタイルシートで背景固定、BODYタグ内には何もなし、右のページも同じくスタイルシートで背景固定、こちらに左のページの背景画像内にある文字からリンクを貼り、そのリンクをはったページを右ページ内に反映させたいのです。 一枚の大きな画像を２分割して左と右のページでそれぞれ固定しているので、IMGタグはなるべく使いたくありません。 （IMGタグでスタイルシートでの背景固定ように、right bottomと出来るのならば全く問題ないので、その場合は教えてください＾＾；）
- 締切済み
- HTML
- 背景が透明なリンクボタンで、透明部分からリンクをさせない方法
1.pngという背景透明なボタンを作り、そこからonmouseでリンクを含む3種類のjavascriptが走るようにしてありますが、それだけだと、画像の透明部分でもリンクとjavascriptが有効になってしまいます。 画像の透明部分にマウスがあるときは何も起こらず、透明でない部分にマウスが乗った時だけにリンクとjavascriptを実行させることはできませんか？ よろしくお願いします。 実際使用しているソースは次の通りです。 -------------------------------------------------- <img border="0" alt="1" src="images/1.png" onclick="location.href='1.htm'" onmousedown="bdown()" onmouseup="bup()" onmouseover="bover(); PP(1)" onmouseout="bout(); PC(1)" id="bimage"/> -------------------------------------------------- ボタンの周囲にアクティブを示す点線の枠を表示させたくないため、リンクにはあえてホットスポットや通常のリンクを使用していません。 よろしくお願いします。
- 締切済み
- HTML
- 同じjavascriptを2つ以上使うにはどうしたらいいのでしょう？
http://www.eweb-design.com/affiliate/0303_jr.html ここで紹介されている、リンクをランダム表示するJavaScriptを使用してます。 上記のサイトのサンプルと同じものは出来たのですが ランダムリンクを2つ以上設置するにはどうすればいいのでしょうか 例えばブログの上部と下部に表示するようにです。 それと上部と下部では表示する内容を変えたいです 検索してみたり自分なりに試行錯誤してみたりしてみたのですが 知識がほとんどないので思うようにできません。 よろしくお願いします。
- 締切済み
- JavaScript
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- onMouseoverを利用して、セル内の背景色と文字を反転させたい
テーブルで各セルに別ページへのリンクのリストを作成しています。 onMouseover と onMouseout でマウスが上に来た時に色を変えるようにしたいのですが、背景色の変更は出来ます。 onMouseover="this.style.backgroundColor='#3a5b88'" のようにして。 問題は文字色でして、こちらの変え方が分かりません。スタイルシートでも設定しているので、文字の上にポインタが来ればスタイルシートの指定通りに色を変えられますが、タイトルにも書いたように、onMouseover時には背景色と文字色を反転させるように考えているので、セル内の文字から離れた位置にポインタが来た時には背景色が文字色に変わる（つまり文字色はそのままなので同じ色になる）ので、文字が消えてしまうのです。 なにか良い方法がありましたら教えてください。
- ベストアンサー
- JavaScript
- onMouseOverがうまくいきません
JavaScriptで、プルダウンメニュー及びマウスで触れたときのメニューの画像変更を行っていますがうまくいきません。プルダウンはうまくいきますが、画像変更しないのです。 どうやらプルダウンメニューの表示・非表示に使っているonMouseOverとonMouseOutが、画像変更のそれらとダブっているためだと思うのですが…。Macでは動作するのですが、Winでは動作しないのです。 <div id="xx" class="yy" onMouseOver="show('xx');" onMouseOut="hide('xx');"> <a href="xx.html" onMouseOver='xxxx' onMouseOut='yyyy'><img src="photo.gif" name="aa"></a> </div> うまく両方機能させるいい方法はないでしょうか？
- ベストアンサー
- JavaScript
- 画像リンクの背景色を１つ１つ指定する。
画像にリンクを張り、その画像に触れたときに、画像の透過されている部分の背景色が変わるようにしたいのですがタグがわかりません。 前に一度やったことがあるのですが、そのときのソースを消してしまってわからなくなっているので困ってます。 <a href="xxx.html" style="a:hover background:#ff0000"><img src="xxx.gif" border="0"></a> ↑こんな感じだったようなきがします。（あまり記憶にさだかではないのですが。） 全体的にリンクの背景色をしていするスタイルシートはわかるので、そうではなくページ内にあるリンク一つ一つの背景色を指定する方法が知りたいです。よろしくおねがいします。
- ベストアンサー
- HTML
- Firefoxの画像を開いた時の背景色と位置
Firefoxを使っています。バージョン11から画像を開くと背景が黒で中央表示になりました。 自分は背景が白で左上表示が慣れているので「Old Default Image Style」と言うアドオンを 入れて旧スタイルで使用していましたが3日程前から、また表示が黒の中央に戻っていました。 （正確な日時は覚えていませんが大体3日前くらいでした） 「Old Default Image Style」を入れなおしたりしましたが旧スタイルには戻りませんでした。 これはFirefoxが細かいバージョンアップをしてアドオンの方が対応しなくなったという事でしょうか？ それとも「Old Default Image Style」は今でも健在で自分のFirefoxに何らかの不具合が 出てるのでしょうか？ 因みに「FireGestures」の新しいタブで開くや他アプリから画像リンクを開いた時は 旧スタイルで画像が開きます。 判る方が居ましたら、よろしくお願いします。 OS：Windows7 64 ブラウザ：Firefox 13.0.1
- ベストアンサー
- ブラウザ
- マウスを置くと画像が変わり、そこにリンクも張れるような
マウスをおくと大きさの違う画像に変えれて、そこにリンクも張れるようなのってどうやればいいですか？ html、スタイルシート、JavaScript辺りでやりたいのですが わかる方教えてもらえませんか？ やはり、フラッシュ使うしかないですか？
- 締切済み
- HTML
- onMouseOverによる表示変更について
HTML、JavaScript とも初心者です。 onMouseOver で同心円を拡大して表示、および、移動して表示を行いたいのですが、 <img src="gazou1.png" onMouseOver="Kasaneru1()" onMouseOut="hanasu1()" id="kaeru" /> であると、同じ大きさの画像にしか変更できません。 拡大表示、移動表示の方法を教えていただきたく、よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
おおおお、 a:hover{ background-position:left bottom;/*マウスオーバーしたら下半分を表示*/ } CSSでこんな書き方できるなんて知りませんでした!!できました!!!!!! ありがとうございます。