- 締切済み
HTMLの組み合わせ
ホームページ作成において 小さいサイズの画像にマウスを重ねると、大きいサイズの画像が出るようにしたのですが、大きいサイズが表示される時に、ブラウザのウィンドウ幅に合わせて最大サイズ表示したい場合、下記のソースを組み合わせれば可能でしょうか？ <img src="小さいサイズ.jpg"onmouseover="this.src='大きいサイズ.jpg'"onmouseout="this.src='小さいサイズ.jpg'"> <p class="resizeimage"> <img src="大きいサイズ.jpg" alt="大きいサイズ"></p>
- WILLKT
- お礼率60% (15/25)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kamikami30
- ベストアンサー率24% (812/3335)
実際にやってみればすぐわかりますよ。
関連する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制作の勉強を初めてまだ２週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません） どうやればマウスオーバーすると画像が大きく表示されるのでしょうか。 よろしくお願いします。
- ベストアンサー
- Java
- 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
- 画像の表示につきまして
こんにちは。お世話になります。 画像の表示について伺いたいことがございます。 現在、HPを作成しています。そこには、横並びで三つの画像を配置しています。 しかし、そのHPをいつ開いても、表示されるのは一番左の画像のみで、真ん中と右の画像は表示されません。 ただし、マウスポインタを当てると、真ん中の画像も右の画像も表示されるようになり、以降は、画像が消えるような事はないのですが、その後、そのHPを閉じて、また開くと、同じように真ん中と右のみ表示されません。 インターネットオプションの「画像を表示する」にも、きちんとチェックが入っていますし、他のPCで開いても同様の結果になります。 こういう場合、どういった不具合が考えられるでしょうか。また、改善方法はありますでしょうか。 因みに、下記のようなタグを使っており、マウスオーバーすると画像が切り替わるようにしてあります。 <p class="img"><a href="http://●●●"><img width="235" height="120" onmousedown="this.src='http://●●●/img1.jpg'" onmouseout="this.src='http://●●●/img1.jpg'" onmouseover="this.src='http://●●●/img1_on.jpg'" alt="画像" src="this.src='http://●●●/img1.jpg'" / border="0"></a></p> windowsXP IE6.0を使っております。 皆様、お忙しい中恐れ入りますが、ご教示下さい。宜しくお願い致します。
- ベストアンサー
- 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
- メニュー作成方法を教えて下さい。
JavaScriptとHTMLを使ってＨＰを作成しています。onmouseoverとonmouseoutを利用して（トップメニューにマウスを置くとサブメニューが出るという）メニューを作りたいんですが、上手くいきません。 トップメニューにマウスを置くとサブメニューーは出ますが、トップメニューにマウスを置いてもいない時に、サブメニューの画像が×となって出ています。この×が表示されないようにするにはどうすればいいのかわかりません。 どうすればいいのでしょうか。 教えて下さいm(__)m function showMenu(selfObj){ document.menu1.src="bana/albumb.jpg"; document.menu2.src="bana/mib.jpg"; document.menu3.src="bana/picb.jpg"; if(selfObj==0){ document.menu0.src="bana/prr.jpg"; } if(selfObj==1){ document.menu1.src="bana/albumr.jpg"; } if(selfObj==2){ document.menu2.src="bana/mir.jpg"; } if(selfObj==3){ document.menu3.src="bana/picr.jpg"; } } function hideMenu(){ document.menu0.src="bana/prb.jpg"; document.menu1.src=""; document.menu2.src=""; document.menu3.src=""; } <a href="4.html" onMouseout="hideMenu();" onMouseover="showMenu(0);" class="navi0"> <img src="bana/prb.jpg" alt="自己紹介" name="menu0" id="menu0" border color=""> </a><br /> <a href="5.html" onMouseout="hideMenu();" onMouseover="showMenu(1);" class="navi1"> <img src="" alt="アルバム" name="menu1" id="menu1" border color=""></a><br /> <a href="6.html" onMouseout="hideMenu();" onmouseover="showMenu(2);" class="navi2"> <img src="" alt="ミッキー" name="menu2" id="menu2" border color=""> </a><br /> <a href="7.html" onmouseout="hideMenu();" onmouseover="showMenu(3);" class="navi3"> <img src="" alt="写真" name="menu3" id="menu3" border color=""> </a>
- ベストアンサー
- HTML
- onmouseoverとoutで画像を切り替えられた・・・けど、何だろう青い枠線；
お世話になります。 ビルダー１１で作成中です。 onmouseover時とonmouseout時に画像を入れ替える処理を入れました。 参考サイトさんを利用して、以下のようなソースです。 <img src="画像.jpg" alt="がぞう" onmouseover="this .src=画像２.jpg';" onmouseout="this .src='画像.jpg';"> でも、上記ソースだと、プレビュー画面で画像の回りに青い枠線が 常時表示されるようになってしまいました（！） ビルダー内蔵のJavaScriptで_HpbImgSwap関数があって、 それを利用していたときはそんなことにはならなかったのですが・・・。 ちなみに、「じゃあ、そっち使えばいいじゃん」とおっしゃる意見も 出ると思うのですが、そちらを利用すると、なんかONMOUSEのときに、 画像が凹む？のです。 それはちょっと都合が悪い、ということで、上記ソースでできるならば、と思いました。 青い枠線を非表示にするには、どうしたらよいでしょうか？ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ よろしくご教示ください。<(_ _)>
- ベストアンサー
- HTML
- onMouseOver,onMouseOutを使用すると
<img>のところに onMouseOver="this.src='○○.gif'" onMouseOut="this.src='○○.gif" として、マウスを乗せたら画像が変わるようにしているのですが、ブラウザで見ると、 「セキュリティ保護のため、コンピューターにアクセスできるアクティブコンテンツは表示されないようInternet Explorerで制限されています。オプションを表示するにはここをクリックしてください」 という情報バーが出てしまいます。 これを出ないようにするにはどうしたらいいのでしょうか？
- ベストアンサー
- 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
- changeImgによる画像の入れ替え時のIEにおける不安定さ
changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。 表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。 何処がおかしいのでしょうか？どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- スワップイメージとロールオーバーの組み合わせで…
上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像をmouseoverで切り替えるのではなく、 マウスを動かしてもクリックしたら下の画像と連動して上の画像も 切り替えることってできますか？？ javascriptは初心者で、まったくわからずです(>-<) <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName) { stepOn = ("" + imgName); document.step.src = stepOn; } </script> （中略） <a href="javascript:doPic('step1.gif');"><img src="img1.gif" name="img" border="0" onmouseover='this.src="r_img1.gif"' onmouseout='this.src="img1.gif"'></a> <a href="javascript:doPic('step2.gif');"><img src="img2.gif" name="img" border="0" onmouseover='this.src="r_img2.gif"' onmouseout='this.src="img2.gif"' ></a><br> <img name="step" src="step1.gif"> ↑こんな感じで作っております<(_ _)>
- ベストアンサー
- JavaScript
