- 締切済み
大画像の上の右上に小画像を表示する方法
いつもお世話になります。 大きな画像の右上に小さな画像を表示するにはどうしたらよいでしょうか。 大きな画像はサイズが変わります。その大きな画像の大きさを指定しないで右上表示ができないものかと苦慮しています。大きな画像は、width:autoで表示させています。 小画像のスタイル <div> <img src="sss.jpg "style="position:absolute; left:600px; top:5px;width:20px;"> <img src="LLLL.jpg" style="width:auto"> </div> と、いう形で行っています。 小画像のleft:600px;の所に大画像の幅を取得できればと試したのですが、その方法もわかりませんでした。 以下の図のような位置に小画像を表示したく思います。 +----------------------+--+ |大大大大大大大大大大大|小| |大大大大大大大大大大大+--+ |大大大大大大大大大大大大大| |大大大大大大大大大大大大大| |大大大大大大大大大大大大大| +--------------------------+ よろしくお願いいたします。
- rqg2010
- お礼率77% (283/364)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ANASTASIAK
- ベストアンサー率19% (658/3306)
関連するQ&A
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <div style="position: relative;"> <img src="sideback.gif" width="182" height="812" alt="sideback"> <div style="position: absolute; top: 30px; left: 15px;"> <span style="position:absolute; top:10px; left:10px"><img src="sidemanu-canner.gif" alt="メニュー"> </span> </div> </div -------------------------------------------------- 画像を重ねたいんですが、firefoxでプレビューすると （IEでも同じです。） 下の画像（背景）の上に上の画像が表示されるはずだった場所に四角い3つぐらい色のついたマークがでて （IEは小さな資格に×マーク） 上に表示されるはずだった画像が表示できません どうしたらいいでしょうか？
- ベストアンサー
- HTML
- htmlについて教えてください
サイトを一から作っているのではなく、 ショッピングサイトの商品ページの一部分を htmlタグを使って作っています。 macで確認するとレイアウトは問題なくきれいに見れるのですが、 windowsで確認すると画像やテキストが崩れています。 これはなぜなのでしょうか？ このような感じで記述していました。 画像の上に画像を重ねて表示し、テキストをその上に表示したいのですが... <div style="position: relative;"><div align="center"> <img src="http://○○○.jpg" alt=""></div> <div style="position:absolute;left:40px;top:40px"> <b>テキスト</b></div> <div style="position:absolute;left:380px;top:100px;width:240px;"> テキスト</div> <div style="position:absolute;left:60px;top:100px"> <img src="http://○○○.jpg"></div> <div style="position:absolute;left:370px;top:22px"><img src="http://○○○.jpg"></div> </div></div> htmlの知識がほとんどないので、 なるべく易しく説明していただければ有り難いです・・・。 よろしくお願い致します。
- 締切済み
- HTML
- jQueryでn秒後に要素を最後に移動
$("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>'); $(".banner").click(function(){ $(this).prependTo("#top_banner"); }); $(".banner1").delay(1000).prependTo("#top_banner"); $(".banner2").delay(2000).prependTo("#top_banner"); <div style="width:750px; background-color:#808080; height:90px; padding-top:6px;"> <div style="width:735px; margin:auto; position:relative;" id="top_banner"> </div> </div> 上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、 うまく動作しません。 クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。 1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。 delayはprependToには効かないのでしょうか。 また、上記ソースをもう少し完結にまとめることは可能でしょうか。
- ベストアンサー
- JavaScript
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
- 画像の上に、背景を表示させテキストを非表示させたdisplay:block;を表示させたい
よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。 通常ならその画像をcssで背景画像に出来るのですが、 画像に順番ずつじんわり表示させるjavascriptの指示をしており、 その画像をcssで背景画像とするわけにいかないのです。 現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、 実際にブラウザで確認すると、何も表示されていないように見えます。 下記がソースです。 よろしくお願いします。 ------------------------------------------------------------ 【HTML】 <div id="containerTop"> <div id="titleTop"> <h1><a href="index.html">タイトル</a></h1> <h2>サイト説明</h2> <ul> <li id="profile"><a href="#">プロフィール</a></li> <li id="photo"><a href="#">写真</a></li> <li id="blog"><a href="#">ブログ</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> </ul> </div> <div id="topbgphoto" class="pics"> <img src="img/top/001.jpg" /> <img src="img/top/002.jpg" /> <img src="img/top/003.jpg" /> </div> </div> ------------------------------------------------------------ 【CSS】 /* container [ ----------------------------------------------------------- */ #containerTop { width:1024px; position:relative; margin:106px auto auto 0; } /* titleTop [ ----------------------------------------------------------- */ #titleTop { width:661px; position: absolute; top: 241px; left: 0px; height: 138px; } #titleTop h1 a{ display:block; text-decoration:none; text-indent:-7777px; width:246px; height:24px; position: absolute; top: 25px; left: 370px; padding:0; font-size:12px; } #titleTop h2{ display:block; text-decoration:none; text-indent:-7777px; width:310px; height:16px; position: absolute; top: 70px; left: 304px; padding:0; font-size:12px; } /* menu [ ----------------------------------------------------------- */ #titleTop ul { position: absolute; top: 87px; left: 0x; padding:0px; list-style:none; } #titleTop li { } #titleTop li a { display:block; text-decoration:none; text-indent:-7777px; height:17px; width:59px; } #titleTop li a:hover { background-image: url(../img/top/menu_ov.jpg); } #titleTop li#profile a{ background-position: 0 0; position: absolute; top:17px; left:344px;} #titleTop li#photo a{ background-position: -70px 0; position: absolute; top:17px; left:414px;} #titleTop li#blog a{ background-position: -140px 0; position: absolute; top:17px; left:484px;} #titleTop li#contact a{ background-position: -210px 0; position: absolute; top:17px; left:554px;} /* ゆっくり表示させる背景画像 [ ----------------------------------------------------------- */ .pics { width:1024px; height:587px; padding: 0; margin: 0; }
- ベストアンサー
- HTML
- cssで画像を中央に表示する方法
http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように２つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか？
- 締切済み
- CSS
- jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）
- htmlで画像の上にテキストを表示したが、ブラウザーによって見え方が違う
ホームページの制作で 部分的に画像の上にテキストをつけようと <DIV STYLE="position:absolute;"> を使って作ってみました。 IEで見るとちゃんとできているんですが、 サファリ、Firefoxで見ると当該箇所が左にずれてしまいます。 ・画像の上にテキストをつける ・その画像の中に部分リンクをつける ・どのブラウザーで見てもずれない 以上の条件を満たせば、やり方を問いません。 どなたか教えていただけませんでしょうか？ どうぞよろしくお願いいたします。 素人なので見づらく、変に複雑になっているかもしれませんが 以下ソースの一部です。 <style type="text/css"> div.先頭画像 { background-image:url(./images/先頭画像); background-position: top center; background-repeat:no-repeat; margin:0; } div.サイド { background-image:url(./images/サイド画像); background-position: top center; margin:0; background-attachment:fixed; } table.Goo{ color:#000; } </style> </head> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <div class="サイド"> <center><img src="./images/リンク画像" width="794" height="662" border=“0” usemap="#top"/><br /> <map name="top"> <AREA SHAPE=rect COORDS="610,0,755,30" HREF="リンク先"> </map></center> <center><IMG SRC="images/white2.gif" width="794" height="1840" border=“0”><br /></center> <!--当該箇所> <DIV STYLE="position:absolute; top:662px; left:58px"> <IMG SRC="images/背景画像" border=“0” usemap="#first"/><br /> <map name="first"> <AREA SHAPE=rect COORDS="633,18,776,228" HREF="リンク先"> </map> <DIV STYLE="position:absolute; top:165px;left:125px"> テキスト </DIV> <DIV STYLE="position:absolute; top:570px;left:125px"> テキスト </DIV> </DIV> <!--当該箇所 ここまで> <center> <table class="Goo" width="756" cellpadding="0" cellspacing="0" border=“0”> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="416" height="53" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="369" height="15" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> テキスト <br /> </td> </tr> </table> </center> </div> </body>
- 締切済み
- その他([技術者向] コンピューター)
- 画像が表示されない。
質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。
- ベストアンサー
- CSS
補足
ANASTASIAKさん、早速レスありがとうございます。 position:absoluteをposition:relativeに変えていろいろと試してみましたが、 だめです。 float:left;なども指定してみましたがだめです。 もう少し詳しく教えていただけないでしょうか。