- 締切済み
マウスオーバーでページ背景を変更
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Hardking
- ベストアンサー率45% (73/160)
マウスオーバーイベント発生時に実行する JavaScriptを追記すればいいです。 <html> <head> <title>親ウィンドウ</title> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- function changeimg() { document.body.background = "img.jpg"; } --> </SCRIPT> </head> <body> <a href="img.html" onmouseover="changeimg()">こんにちわ</a> </body> </html>
関連するQ&A
- ＣＳＳの画像のマウスオーバーの質問です
こんにちは [画像A]にリンクをはって、マウスオーバーの時に、[画像B]に切り替わるようにしたいのですが、できません。 ドリームウィーバーのビヘイビアパネル→スワップイメージを使うとできました。 しかし、CSSを使って、マウスオーバー時に画像を切り替えたいのです。 テキストを入れて、テキストインデント、-9999でテキストを飛ばして背景に「画像A」を持ってきて、a:hoverで「画像B」をいれて、マウスオーバーを切り替える。これもできました。 しかし、 <body> <a href="#"><img src="images/gazou.jpg" width="100" height="100" /></a> </body> ↑ このような画像のリンクにＣＳＳを使ってマウスオーバーの画像切り替えをしたいのです。 どなたか、ご存知の方教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。
テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。
- ベストアンサー
- HTML
- マウスオーバーで複数の画像を非表示
マウスオーバーで画像を非表示にしています。 以下の例で、複数の画像を非表示にするにはどうすればよいでしょうか？ 例では画像はjpeg1.jpg～jpeg3.jpgの３つですが、実際には個数は毎日変化します。 <a>タグに画像の個数分のonMouseOverを書けばよいのでしょうが、もっと簡単に書く方法はないでしょうか。 PerlからHTMLを吐き出します。 <html> <a href="Javascript:" onMouseOver="jpeg1.style.display='none';" onMouseOut="jpeg1.style.display='';">非表示</a><br> <img src="./jpeg1.jpg" name="jpeg1"><br> <img src="./jpeg2.jpg" name="jpeg2"><br> <img src="./jpeg3.jpg" name="jpeg3"><br> </html>
- ベストアンサー
- JavaScript
- 画像リンクをマウスオーバーで透過画像を重ねる方法
複数の画像リンクをマウスオーバー時に決まった画像を重ねて表示させたいのですが分かりません。 ご教授頂けないでしょうか。 画像リンクの上にマウスが乗った時に虫眼鏡や再生ボタンが表示される みたいな事がしたいのです。 自分なりに調べた結果画像を上に重ねるところまでは分かったのですが、重なった時点で画像リンクが無効になってしまいます。 方法としては <p class="figure" id="jpg01"> <a href="リンク先" target="_blank"><img src="画像" width="300" height="150" alt=""></a> </p> p.figure{position:relative;} p.figure:after{position:absolute;bottom:0;left:0;} p#jpg01:hover:after{content:url(重ねる画像.png);} としているのですがリンク先に飛ぶことができません。 <a href="リンク先" target="_blank"><p class="figure" id="jpg01"> <img src="画像" width="300" height="150" alt=""> </p></a> とすれば上手くいったのですが不格好な気がします。 ちなみに画像リンクに使いたい画像もそれに重ねたい画像も同じサイズです。 どうかよろしくお願いします。
- 締切済み
- HTML
- マウスオーバーのやり方を教えてください。
はじめまして。 実はこのたび、ホームページを業者さんに制作していただきました。 そして、今は素人ながら今後のことも考え自分たちで知識を身につけようと勉強中です。 今回、業者に制作していただいたホームページのソースをそのままdreamweaverに貼り付けてみました。 画像もちゃんと配置したのですが、なぜかホームページ内のマウスオーバーが機能しません。 実際にサーバーにアップされているホームページはちゃんとマウスオーバーが機能しているのにです・・・ 一応、テキストブックを片手に頑張ってはいるのですが、どうも行き詰っています。 以下が、そのソース内容となります。 ↓ 『<TD valign="bottom"><A href="../index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu_home','','../img/home2.jpg',1)"><IMG src="../img/home.jpg" alt="HOME" name="menu_home" width="100" height="25" border="0"></A></TD>』 以上、本当に初心者ですので、質問内容自体に不備があると思いますが、どうかマウスオーバーが機能しない原因を教えていただけないでしょうか？ そのまま、ソースをdreamweaverにコピー、し画像を用意するだけではだめなのでしょうか？ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています） やりたいことは以下の２つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
- JavaScriptでリンクを設定したい
JavaScript超初心者です。 サイトで画像やテキストリンクが1ページにとても多く、 リンクアドレスも同一のものが数か所あります。 JavaScriptでリンクを設定すれば、リンクだらけにならないと聞いたので 使ってみようと思ったのですが、上手くいきません。 http://www.openspc2.org/reibun/javascript/link/020/ こちらのサイトを参考にやってみたのですが、 テキストリンク1カ所はできました。 でも、画像リンクはnullと表示されて画像も表示されなくなり、 2個目のテキストリンクはリンクになりません。 <a href="./aaa.html"><img src="./img/aaa.jpg" /></a> <a href="./aaa.html">あああ</a> <a href="./bbb.html"><img src="./img/bbb.jpg" /></a> <a href="./bbb.html">いいい</a> <a href="./aaa.html"><img src="./img/ccc.jpg" /></a> <a href="./aaa.html">ううう</a> このように表示されているリンクを JavaScriptでリンクを設定するにはどうしたらよいでしょうか？ よろしくお願いします！
- 締切済み
- ブログ
- 背景画像上に複数枚の画像配置について
お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 （図が下手ですみません） わかる方、ご教示をお願いします。
- 締切済み
- CSS
- マウスオーバーの合体
マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript
- CSSで背景画像マウスオーバー
スタイルシートのマウスオーバーについて質問です。 <div class="AAA"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .AAA { background-image: url("http://xxxxx_back.gif") } 上記の状態で、「xxxxx.gif」の背景に「xxxxx_back.gif」を表示させるまでは 思い通りに出来たんですが、 背景表示はマウスオーバーの時だけにしたかったので、 <div class="BBB"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .BBB a:hover { background-image: url("http://xxxxx_back.gif") } という風にしたんですが、 BBBにすると、オーバー時の表示は出来ましたが、背景画像がズレてしまいます。 AAAの時の表示位置は正確です。 AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、 何故でしょうか。 ※safariで検証しました。 ※style="margin-top: 22px;"は都合上入れてます。
- ベストアンサー
- ブログ
