画像にマウスポインタが乗ったときに画像に変化が現れる方法とは？
- 画像にリンクを張り、マウスポインタが乗ったときに画像に変化が現れる方法を教えてください。
- HTMLの<a>タグと<img>タグを使用して画像にリンクを張り、マウスポインタが乗ったときに画像に変化が現れるようにする方法を教えてください。
- 画像にリンクを張り、マウスポインタが乗ったときに画像に変化が現れる方法について詳しく教えてください。
- ベストアンサー
画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化
画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化が現れるようにしたいのですが方法がわかりません。どなた様かご指導のほどよろしくお願いいたします。 今回画像を以下に掲載させて頂きました。よろしければ見てみてください。 http://desktop10.web.fc2.com/11.gif 上記を見て頂くと、HOMEの下に赤い線が入っています。マウスポインタを合わせたときに上記のようにしたいと考えております。よってマウスポインタをあわせないときは、赤い線が表示されないようにしたいと考えております。このような場合はどのような記述が必要なのでしょうか？ 私はhtmlには以下のような記述をしました。 <a href="http://index.html"><img src="img/test.gif" alt="ボタン" width="115" height="48" /></a> どなた様か、ご指導のほどよろしくお願いします。
- pcckit
- お礼率76% (472/621)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
403で画像は見れません（fc2はたしか直リンク禁止だったとおもいます） CSSを使い実装することができます ”ロールオーバー”で検索してみてください
その他の回答 (1)
- ponzuinfo
- ベストアンサー率53% (16/30)
>>その画像を横に並べたく方法がわからず難儀しております。 [ロールオーバーの画像1][...2][...3] と横に並べるだけでしたら、同じくCSSで実装できます。 "CSS 回り込み"などで検索をすれば良いかと。 もっと簡単な方法としてはテーブルタグを使う方法がありますが、最近では時代遅れな方法です。
関連するQ&A
- 画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いし
画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いします。 画像が二枚あり一枚は通常時に表示されるようにしたと考えております。参考までにその画像は以下になります。よろしければ見てみてください。なお一枚目の画像ファイルは img/1.gifといいます。 http://desktop10.web.fc2.com/1.gif 次にマウスを重ねたときに表示されるようにしたい画像が以下になります。 なお二枚目の画像ファイルはimg/11.gifといいます。 http://desktop10.web.fc2.com/11.gif そこで私は「html」の部分に以下の記述をしました。 <div id="waku1"> <div> <a href="index.html/"><img src="img/1.gif" width="108" height="48" alt="*" /></a> </div> </div><!-- waku1 end --> 次に、「css」に以下の記述をしました。 #waku1 div{ width:109px; background:url(img/1.gif); height:48px; float:left; border: solid 1px #d3d3d3; } #waku1 a{ display:block; width:100%; height:100%; text-decoration:none; } #waku1 a:hover{ background:url(img/11.gif); } 上記のようにしてブラウザ上で確認をしたところ、780pxの枠の中に隙間無くぴったりと収まったのですが 該当の画像にマウスポインタを合わせたところ、11.gifの画像に変わってくれません。ただ少し気になった点は、マウスポインタをあわせたときに画像の隙間から赤い線がわずかに見えました。・・ ですが、11.gifのように画像にしっかりと表示できません。私には全くわからないのですが、どなた様かご教示をいただけませんでしょうか？ どうかご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
- メニューボタン（リンク入り）に画像を使っていますが、マウスポインタを乗
メニューボタン（リンク入り）に画像を使っていますが、マウスポインタを乗せた時に（今ここを選択していることが分かるように）色が変化したり、枠が付いたりするようにしたいと考えています。 いろいろ調べてみたのですが、１つの方法として次のように書けばいいようです。 （CSS） a{ display:block; width:50px; height:50px; background:url(img_02.png) no-repeat 0px 0px; } a:hover img{ filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); opacity: 0.0; } （HTML） <a href="#"><img src="img_01.png"></a> しかし、全く変化ありませんでした。 GIF画像を使っているのですが、これをPNG形式の画像に変更して（CSS）のbackground:url(img_02.png) no-repeat 0px 0px;の中の「img_02」の部分を変更すればいいのでしょうか？ それとも「02」の部分だけ変更すればいいのでしょうか？ （HTML）も同様に「img_01」なのか「01」の部分だけなのか？ また、（CSS）にあるdisplay:block; width:50px; height:50px; は書く必要があるのでしょうか？ 画像を使っているのでわざわざ書く必要がないとも思うのですが・・・。 何が間違っているのか分かりませんので、お気づきの点や、その他に良い方法がありましたら教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- HTML
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- 1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！
- ベストアンサー
- JavaScript
- 画像が2枚入れ替わるようにしたい
ポインタ（マウス）を載せると画像が変わる。画像が2枚入れ替わるようにしたいのですが・・・ http://www.coffee-minton.com/sinkiro/mokuji10-2-5.html ( ↑ このサイトに説明がありました ） 下の２枚の画像を入れ替えたいのですが、うまくできないのですが、どなたかご指導くださいませ <IMG SRC="http://image.space.rakuten.co.jp/lg01/58/0000425358/24/img9de5c6f5zik6zj.jpeg" width="154" height="130"> <IMG SRC="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpeg" width="125" height="150"> -------------------------------------------------------------- 見本のタグ <!--http://coffee-minton.com/sinkiro/ --> <IMG src="0-11.gif" width="248" height="174" onmouseover= "this.src='0-1.gif'" onmouseout="this.src='0-11.gif'"> --------------------------------------------------------------- 下記のようにやってみたのですが、うまくいきません＾＾； <!--http://coffee-minton.com/sinkiro/ --> <IMG src="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpeg" width="125" height="150" onmouseover= "this.src="http://image.space.rakuten.co.jp/lg01/58/0000425358/24/img9de5c6f5zik6zj.jpeg" onmouseout="this.src="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpe"> --------------------------------------------------------------
- 締切済み
- ブログ
- リンクにマウスポインタをおくと画像切り替え
リンクにマウスポインタをおくと画像を切り替えるソース（以下）をfreeのJavaScriptサイトからもってきて解読しています。よろしくお願いします。 ＜質問＞ ・gotolink=urlは、varなしの変数でChangeimage関数の引数urlを代入している？ window.location=gotolink、var gotolink="#"との関係は？ ・var gotolink="#"の#の意味は？ ・this.hrefとあるが、thisは何を指す？ ・"javascript:warp()"の意味は？ ・<script></script>、<script language="JavaScript1.1"></script>はscript定義が2つに分割されているが正しい記述か？ ---スクリプト--- <script> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif") </script> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <p><a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a></p> ☆中略☆ <a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a> </td> </tr> </table>
- ベストアンサー
- JavaScript
- css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
- 外部ファイルの記述の仕方
HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>
- ベストアンサー
- JavaScript
- 画像の切り替えの記述形式について
<a href="#A" onclick="document.A.src='../img/gif/B1.gif'"><img src="../img/gif/A1.gif" alt="" width="133" height="176" name="A" id="A" /></a> 画像としてA1.gifがあるのですが、A１.gifを押すと、リンク先のB1.gifが呼び出されて、変更されるというスクリプトになっています。 上のような記述をしているのですが、この場合、指定している#Aのアンカーリンクを指定しているため、画像を押す事に移動してしまいます。移動をしないようにするにはどうしたらいいですか？ <a href="javascript:openURL('URL');"><img></a> このような形式で、アンカーリンクにならずに、上のような操作が可能になるという話を聞きました。 こういう場合、どのように記述したらいいですか？
- 締切済み
- JavaScript
- relタグにリンクスタイルを指定したい
いつもお世話になっております。 初心者なのですが試行錯誤をしつつWEBを制作しています。 jQueryのFancyboxを使って画像の表示をさせているのですが、その画像に対してリンクスタイル（マウスオーバーで画像に枠線表示）を指定したいのです。 コードの一部として以下のようになっています。 <a rel="press_group" href="image/press_06.jpg"><img src="image/press_06.gif" width="386" height="546" alt="プレス_06" /></a> <a rel="press_group" href="image/press_07.jpg"><img src="image/press_07.gif" width="340" height="241" alt="プレス_07" /></a> このような場合どのようにスタイルシートを書けばいいのでしょう？ Fancybox自体は正常に動いています。 何卒ご教授よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
ponzuinfo様 ありがとう御座いました。ロールオーバーと検索したところ確かに色々と出てきました。 よって出来たといえば出来たのですが、わたしとしては、その画像を横に並べたく方法がわからず難儀しております。 ですが、お蔭様で大発展が出来ました。 ありがとう御座いました