- ベストアンサー
画像をかさねて表示させるには？
kimny3の回答
関連するQ&A
- 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>
- 締切済み
- その他([技術者向] コンピューター)
- 画像のNetscapeでの表示
Netscapeで下記のようにテーブルを組むと画像の表示がされません。 IEではうまく表示してくれるのですが・・・。 <table border='0' cellspacing='0' cellpadding='0' width='100%' height='100%' style='position:absolute;bottom:0px;left:0px;'> <tr> <td><img src="xxx.gif"></td> </tr> </table> Netscapeで使用できないタグなどがふくまれているのでしょうか？ Netscapeのバージョンは、7.02です。
- 締切済み
- HTML
- テーブル内に画像を表示したい。
テーブル内に画像を1枚表示したいです。 下記のようにIMGタグを用いると、画像が表示されますが、 横幅が100％の時の大きさで枠が表示 されます。横に余白があります。 この余白を無くして、テーブルの枠線が画像をピッタリ 囲む様にしたいです。 どなたか、ご教授願います。初心者なので詳しくお願い します。 ---------------------------------------------- <table border=1> <tr> <td > <img src='./test_size/image2.jpg' width='50%' > </td> </tr> </table>
- ベストアンサー
- HTML
- 画像を横に並べると、枠線が出てしまう
<table border="0"> <tr> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> </tr> </table> これで、WPで作ったブログの画像を並べてみたのですが、 枠線を設定していないのに、細い枠線が出てしまいます。 <table> <tr> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> <td><img src="画像ファイルのURL"></td> </tr> </table> で、やっても枠線が出ます。 どのような記述にすれば、枠線が一切ない状態で並べることができるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- 画像をクリックして別の画像を表示させたい
現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 （下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。） ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で５枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか？ 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像の四隅を丸くしたい
html初心者です。 あるメイン画像の左上に、透過gif画像を重ねて表示させたいのですが、そのようなことは可能なんでしょうか・・・ メイン画像は長方形です（通常の画像のように、ふちは角ばっている）。その画像の左上に、透過gif画像を重ねて表示させようとしています。 htmlには： <TABLE> <TR> <TD> <div id="corner"><IMG SRC="images/frame4_03.gif"></div> <div id="inner"><IMG SRC="screen05_04.jpg"></div> </TD> </TR> </TABLE> cssには： #corner{ position:absolute; left:251px; top:98px; width:99px; height:39px; BACKGROUND-COLOR:#FFFFFF; } #inner{ position:absolute; left:251px top:98px; width:999px; height:799px; } と書いています。 WindowsXP、IE7で表示させています。 よろしくおねがいいたします。
- ベストアンサー
- HTML
- マウスオーバーでテーブル表示
タイトル通りのことがしたくて、以下のようにしてみたのですが、表示されません。 どこがダメなのか教えてください。 （マウスオーバーで画像表示、はできるようになったんですが。。。） <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
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <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
- 画像と画像の間の空白
画像と画像を左右に並べて配置したかったので、 <table> <tr> <td><img src="○○.gif"></td> <td><img src="○○.gif"></td> </tr> </table> したのですが、少し画像と画像の間に空白を作りたいと思っています。 どのようにすればいいですか？ 又、画像と文字の場合も同じやり方でできますか？ これとはまったく別のやり方でも構いません。 教えてください。
- ベストアンサー
- HTML
- ホームページの画像が表示されない
宜しくお願いします。 忍者ホームページの簡単ホームページでホームページを作りましたが画像が表示されず コメントだけの表示に成ります。 忍者ホームページにアップロードした画像ファイル名は一致しております 幾度試しましたが同じ状態です 下記のHTMLは間違って居りますでしょうか困って居ります <table align="right"> <tr><td><img src="img142.jpg"width="250" height="250"></td> <td><img src="img004.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#ffcccc">ハイブリットフリウス</td> <td bgcolor="#66cc66">フーガハイブリット</td></tr> <tr><td><img src="img013.jpg"width="250" height="250"></td> <td><img src="img889.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#cc9900">ポルシェカレラ</td> <td bgcolor="#9999cc">フェラリーモンディアル</td></tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
補足
ご回答いただき、感謝しています。Ｆｉｒｅｆｏｘは最新バージョンのはずです。説明が不足していてすみません。掲載したソースは当方でもちゃんと表示でき問題ないのですが、同じ内容（のつもり）を制作中のＨＰに組み込んだらちゃんと表示できないもので...。 検索すると表示できないＦｉｒｅｆｏｘの方が正解でＩＥなどの方が特殊とありました。 知りたい事は、同じ経験をした人がいないか、また未だにこういった状態なのか、それとも今は改善されているのかということです。もうだいぶ長い間悩んでますもので...m(..)m