- ベストアンサー
マウスオーバーで別の画像に切り替える
リンクの上にマウスをもっていくと 画像を切り替えて、はなれるとまたもとにもどる っていうことをしたくて JavaScriptと sccのvisibility:hidden visibility:visible position:absolute; をつかって作ってみたのですが、予想できるとおもいますが、実際に画像を摩り替えてるわけではありません それで前になにかで、onMouseOver="this.src('')"のようなのをみたんですけど、ちゃんと思い出せません 正しくはどう書くのか教えてください
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんなページはいかがでしょうか？ http://web.kyoto-inet.or.jp/people/korapisi/html/mousover.htm
その他の回答 (1)
- t-san
- ベストアンサー率36% (116/314)
<a href="http://リンクＵＲＬ"><img src="画像ファイル" onmouseover="this.src='オンマウスで表示する画像ファイル'" onmouseout="this.src='マウスが離れると表示される画像'"></a> でＯＫだと思います。
関連するQ&A
- マウスオーバーの合体
マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <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
- マウスをクリックで画像・・・
マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、 以下の通りにUPすると「エラー」が出てしまいます。 どこが悪いのか解らないので よろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>
- 締切済み
- JavaScript
- マウスオーバーでテーブル表示
タイトル通りのことがしたくて、以下のようにしてみたのですが、表示されません。 どこがダメなのか教えてください。 （マウスオーバーで画像表示、はできるようになったんですが。。。） <script language="JavaScript"> function table(object,hyoji){ document.[object].style.visibility=hyoji } </script> <img src="onMouseOver('TABLE1','visible');"> <SPAN STYLE="POSITION:ABSOLUTE; TOP:30; LEFT:40; filter: Alpha(opacity=60); visibility='hidden';"> <TABLE CLASS="SETSUMEI" NAME="TABLE1"> <TR><TD CLASS="SETSUMEI">TOPページに<BR>戻ります。</TD></TR></TABLE></SPAN> テーブルって名前つけられたんだっけ…？とかいろいろ不安なところはありますが、 よろしくお願いします。
- ベストアンサー
- JavaScript
- ロールオーバーで画像拡大、z-index
下記の様にjavascriptとcssで、 サムネイル画像をロールオーバーしたら拡大画像が表示されるように設定しました。 しかしz-indexが効かずに拡大画像がほかのサムネイル画像の下に表示されてしまいます。 z-indexの対処方法などいろいろ調べ試してみたのですが、 うまくいきませんでした。 どのようにすればうまく表示できるか教えていただけないでしょうか。 よろしくお願いします。 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function setStyle(thum,vType) { document.getElementById(thum).style.visibility = vType; } //--> </script> </head> <body> <p style="margin-top:50px;"> <div style="position:relative; float:left;"> <div id="thum1" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')" style="border:0px; z-index:2;"> <img src="thum1.png" width="100" height="100"> </div> <div id="thum2" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')"> <img src="thum2.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト1</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum3" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')" style="border:0px; z-index:2;"> <img src="thum3.png" width="100" height="100"> </div> <div id="thum4" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')"> <img src="thum4.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト2</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum5" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')" style="border:0px; z-index:6;"> <img src="thum5.png" width="100" height="100"> </div> <div id="thum6" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')"> <img src="thum6.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト3</center></b> </div> </div> </div> </p> </body> </html>
- ベストアンサー
- HTML
- マウスオーバーで画像変更で
以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません（＞＜） 間違いを訂正してください！
- ベストアンサー
- JavaScript
- 動いている画像へのリンクは可能でしょうか？
画像を動かし、そこにリンクを貼りたいのですが可能でしょうか？ 下のソースの中にリンクを埋め込みたいのですがどうやっても うまくいきません。根本的にやり方がちがうのでしょうか・・・。 document.write("<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: " + m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src=" + img_name + " ></div>");
- ベストアンサー
- JavaScript
- USEMAPでの指定区域にマウスオーバー→画像popup、クリックで別窓映像表示させる記述
USEMAPでエリア指定した（画像の）一部にマウスオーバーした時に、補足説明画像をポップアップさせる方法はありますでしょうか？ 従来はCSSの処理で、一つの画像にマウスオーバーした時に下記【１】の手順で別の説明用画像をポップアップ表示する処理が出来ているのですが、（通常はhidden,マウスオーバーでvisible） 今回【２】のようなUSEMAPで指定した（大きな画像の）一部のEREA指定部にマウスがオーバーした時点でポップアップ出来れば良いなあ…と、質問させていただきました。 教えていただければうれしいです。よろしくお願いします。<(_ _)> ちなみに、USEMAPを使う理由ですが、当該画像エリア部をクリックすると対応したビデオ映像が別窓で表示されるようにしています。 この動作は必要ですのでご配慮ください。 なお、ALT属性は画像が使えません。 よろしくお願いします。 ------------------------------------------------------- 【１】 <HEAD> .popup01 A { POSITION: relative } .popup01 A IMG.message { LEFT: -50px; VISIBILITY: hidden; WIDTH: 250px; POSITION: absolute; TOP: -50px; HEIGHT: 42px } .popup01 A:hover { VISIBILITY: visible } .popup01 A:hover IMG.message { VISIBILITY: visible } </HEAD> <BODY> <A href="001.jpg" ALT="*" BORDER="0"><IMG class=message src="popup001.gif" border=0></A> </BODY> ------------------------------------------------------- 【２】 <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function sub_open_movie01(){ window.open("./movie-con01.html",""," width=600,height=550,left=50,top=50,menubar=yes,scrollbars=yes"); } //--> </HEAD> <BODY> <img src="002.jpg" USEMAP="#UserMapName"> <MAP NAME="UserMapName"> <AREA SHAPE="RECT" COORDS="10,10,50,50" HREF="javascript:sub_open_movie01();"> </MAP> </BODY> ------------------------------------------------------- 記述はCSS,Javascript等いずれでも結構ですので、マウスオーバーでポップアップ→マウスアウトで消え、クリックで別窓映像表示してくれればうれしいです。 単一の画像に対して（マウスオーバー・アウト）の記述はネットで検索するとたくさん教えてもらえるのですが、USEMAP中での処理に関して（マウスオーバー・アウトとクリックで）各々別の動作（画像表示ON,OFFと別窓表示window.open）をするような解説は見つけられませんでした。 よろしくお願いします！<(_ _)>
- ベストアンサー
- JavaScript
- マウスオーバーのプルダウンメニューについて
すみません。まったくのしろうとです。教えてください。 会社のWebサイトをリニューアルしようとしていますが、メニューを折りたたみにしたいと考えています。ネットでmouseoverというJavaスクリプトでできるということまでは突き止めました。そしてサンプルも見つけたのですが、やりたいことと合致しなくて困っています。 <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="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> </body> このスクリプトでは、newimg/AdAge.gifという画像の上にマウスをかざすと、言葉がプルダウンで出てきます。わたしがやりたいのは、この画像を単なるテキストに変えることです。HTMLエディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか？ どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- ロールオーバーで・・・
検索かけて調べてみたのですがみつからなかったので 質問させていただきます。 画像にリンクを貼り、マウスを乗っけたときと 画像をクリックしてリンクしている最中に画像を変えたいのですが、 後者のやり方のタグがわかりません もしやり方を知っていたら教えて下さい。 よろしくおねがいします。 <a href="リンク先"> <IMG src="最初に表示させる画像" onMouseOver="this.src='マウスが触れた時に変わる画像'" onMouseOut="this.src='マウスが触れた後に変わる画像'"></a>
- 締切済み
- HTML
- リンク文字にマウスを乗せると画像を表示したい。
はじめまして。 初心者でわからないので，質問します。 よろしくお願いします。 JavaScriptで，リンク文字にマウスを乗せたときに， 空いているスペースに画像をフェードイン・フェードアウト して表示したいと考えています。 リンクが一つの場合はできたのですが， これが複数のリンクが合ったときには， どのようにすればよろしいでのしょうか？ <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="test.css" rel="stylesheet" type="text/css"> <title>What's New!</title> </head> <body> <script language="JavaScript"><!-- <!-- function fadein(id) { app = navigator.appName.charAt(0); ver = navigator.appVersion.charAt(0); if ((app == "M") && (ver >= 4)) { document.all.item(id).style.visibility = "hidden"; document.all.item(id).filters[0].apply(); document.all.item(id).style.visibility = "visible"; document.all.item(id).filters[0].play(); } // --> } // --></script> <IMG SRC="AAA.jpg" ID="myIMG" STYLE="filter:revealTrans(duration=3.0,Transition=12);visibility=hidden;" width="420" height="240" style="position:absolute; top:100px; left:350px;"> <div class="menu">■<a href="####" onMouseOver="fadein('myIMG')">フェード１</a></div> </body> </html>
- ベストアンサー
- JavaScript
お礼
お二方へ ありがとうございました おしかったーｗ