zoomでマウスオーバーで画像が大きく表示される方法
- zoomでマウスオーバーすると画像が大きく表示される方法を教えてください。
- zoomのマウスオーバーで画像が大きく表示されない問題について質問です。
- zoomのマウスオーバーで画像が拡大表示されない原因と解決方法を教えてください。
- ベストアンサー
zoomについて質問です。
zoomについて質問です。 http://www.ikko21.com/ このサイトの中段の画像に、マウスオーバーすると画像が大きく表示されます。 その「マウスオーバーで画像が大きく表示」をやってみたくて ソースを見てみると、 <td width="153" height="120" align="right" valign="middle"> <p class="zoom2"> <a href="#"> <img src="w2img/ww0217031636H21yokoshin.JPG" alt="◇土地貸（事業用定期借地）◇" width="146" border="0"> </a> </p> </td> となっていたので <p class="zoom2"><img src="イメージ"></p> とやると何も変化がなく、 <img src="イメージ" alt="サンプル" style="zoom: 200%;"> とやるともともとの画像が200%で表示されてしまいます。 色々試そうと思い、 <img alt="Sample" onmouseover="this.src='イメージ '; style='zoom: 200% ';" onmouseout="this.src='/イメージ'" src="イメージ" /> や <img alt="Sample" style='zoom: 200% ' onmouseover="this.src='イメージ ';" onmouseout="this.src='/イメージ'" src="イメージ" /> という風にやってみてもダメでした。 （HP制作の勉強を初めてまだ２週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません） どうやればマウスオーバーすると画像が大きく表示されるのでしょうか。 よろしくお願いします。
- rossi46mail
- お礼率96% (251/259)
- Java
- 回答数1
- ありがとう数7
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Javaとは関係なさそうな話なので、HTMLのカテゴリでどうぞ。 [技術者向] コンピューター > プログラミング > HTML
関連するQ&A
- zoomについて質問です。
zoomについて質問です。 http://www.ikko21.com/ このサイトの中段の画像に、マウスオーバーすると画像が大きく表示されます。 その「マウスオーバーで画像が大きく表示」をやってみたくて ソースを見てみると、 <td width="153" height="120" align="right" valign="middle"> <p class="zoom2"> <a href="#"> <img src="w2img/ww0217031636H21yokoshin.JPG" alt="◇土地貸（事業用定期借地）◇" width="146" border="0"> </a> </p> </td> となっていたので <p class="zoom2"><img src="イメージ"></p> とやると何も変化がなく、 <img src="イメージ" alt="サンプル" style="zoom: 200%;"> とやるともともとの画像が200%で表示されてしまいます。 色々試そうと思い、 <img alt="Sample" onmouseover="this.src='イメージ '; style='zoom: 200% ';" onmouseout="this.src='/イメージ'" src="イメージ" /> や <img alt="Sample" style='zoom: 200% ' onmouseover="this.src='イメージ ';" onmouseout="this.src='/イメージ'" src="イメージ" /> という風にやってみてもダメでした。 （HP制作の勉強を初めてまだ２週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません） どうやればマウスオーバーすると画像が大きく表示されるのでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- 画像 表示について質問です。
画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。
- ベストアンサー
- PHP
- 複数の画像を連動してロールオーバーさせたいのですが
宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか？ （3つの画像のリンク先は全て同じです） どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>
- ベストアンサー
- HTML
- document.writeln内でマウスオーバー
現在、HPを制作中なんですがページ数が増えサイドメニューを javascriptで一括管理するようになりました。（SEO的に不利なのを承知の上） しかし、ナビゲーションの画像を↓ <img src='/img/sonota-1.png' hspace='0' vspace='0' onmouseover='this.src='/img/sonota-2.png'' onmouseout='this.src='/img/sonota-1.png'' width='240' height='65' alt='その他'> のように記述していたのですがdocument.writelnで、これを表示させるとマウスオーバー時の 画像がマウスを重ねても表示されません。 要は、「document.writeln」内で「onmouseover='this.src='/img/sonota-2.png'」使うにはどうしたらいいのでしょうか。
- 締切済み
- JavaScript
- HTMLの組み合わせ
ホームページ作成において 小さいサイズの画像にマウスを重ねると、大きいサイズの画像が出るようにしたのですが、大きいサイズが表示される時に、ブラウザのウィンドウ幅に合わせて最大サイズ表示したい場合、下記のソースを組み合わせれば可能でしょうか？ <img src="小さいサイズ.jpg"onmouseover="this.src='大きいサイズ.jpg'"onmouseout="this.src='小さいサイズ.jpg'"> <p class="resizeimage"> <img src="大きいサイズ.jpg" alt="大きいサイズ"></p>
- 締切済み
- その他（インターネット・Webサービス）
- よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい
よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？ わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
- マウスオーバーの合体
マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <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
- 画像のランダムチェンジとフェードイン効果
質問ですが、まず最初に失礼がありましたらお許し下さい。 http://oshiete1.goo.ne.jp/qa3495988.html での質問に関連していると思うので、例を引用させて頂きます。 横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を６個にしての設置を行います。横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたい・・ ここまでは回答で納得したのですが、メイン画像を一定時間でランダムチェンジさせる事とメイン画像の変化時にフェードイン効果を与える事の２点に挌闘しています。過去の質問ログを全部調べましたが、ないものですね。 <html> <head> <title></title> <style type="text/css"> img{border:1px solid red;} #box0 { width:770px; height:300px; position:relative; } #box mainview{ position:absolute; top:0;left:0; } #box0 ul{ position:absolute; top:0;left:590px; list-style-type:none; margin:0; padding:0; } #box0 li{ margin:0; padding:0; } #box0 li img{ vertical-align:top; } </style> <script type="text/javascript"> function sample(obj,mode){ var images = obj.getElementsByTagName('img'); images[0].style.display = (mode)?'none':'inline'; images[1].style.display = (mode)?'inline':'none'; var idNo = images[0].id.match(/(\d)/); for(var x=document.getElementById('mainview').firstChild; x;x=x.nextSibling){ if(x.id){ if(!mode && x.id.match(/0/) || mode && x.id.match(idNo[1])) x.style.display = 'inline'; else x.style.display = 'none'; } } } </script> </head> <body> <div id="box0"> <span id="mainview"> <img src="xxx0" width="590" height="180" alt="xxx0" id="xxx0"> <img src="xxx1" width="590" height="180" alt="xxx1" id="xxx1" style="display:none;"> <img src="xxx2" width="590" height="180" alt="xxx2" id="xxx2" style="display:none;"> <img src="xxx3" width="590" height="180" alt="xxx3" id="xxx3" style="display:none;"> <img src="xxx4" width="590" height="180" alt="xxx4" id="xxx4" style="display:none;"> <img src="xxx5" width="590" height="180" alt="xxx5" id="xxx5" style="display:none;"> <img src="xxx6" width="590" height="180" alt="xxx6" id="xxx6" style="display:none;"> </span> <ul> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy1" width="180" height="50" alt="yyy1" id="yyy1"><img src="zzz1" width="180" height="50" alt="zzz1" id="zzz1" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy2" width="180" height="50" alt="yyy2" id="yyy2"><img src="zzz2" width="180" height="50" alt="zzz2" id="zzz2" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy3" width="180" height="50" alt="yyy3" id="yyy3"><img src="zzz3" width="180" height="50" alt="zzz3" id="zzz3" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy4" width="180" height="50" alt="yyy4" id="yyy4"><img src="zzz4" width="180" height="50" alt="zzz4" id="zzz4" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy5" width="180" height="50" alt="yyy5" id="yyy5"><img src="zzz5" width="180" height="50" alt="zzz5" id="zzz5" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy6" width="180" height="50" alt="yyy6" id="yyy6"><img src="zzz6" width="180" height="50" alt="zzz6" id="zzz6" style="display:none"></a></li> </ul> </div> </body> </html> の中に何を追加すれば・・・ ご教授の程よろしくお願いします。
- ベストアンサー
- JavaScript
- イメージをあらかじめ読み込むには？
マウスカーソルが重なったとき、イメージを切り替える処理を 行おうと思っています。 <img src="top_01.gif" onMouseOver="this.src='top_02.gif'" onMouseOut="this.src='top_01.gif'"> このようなソースでイメージを切り替えているのですが、 マウスカーソルが重なったときに初めて新しいイメージ (この場合は'top_02.gif')を読み込むようです。 これだとタイムラグができてしまうので、最初にhtmlファイルを読み込む際、 あらかじめ新しい画像を読み込むにはどうすればよいのでしょうか？
- ベストアンサー
- JavaScript
お礼
申し訳ないです。 HTMLの方に書き込みました＾＾；