- 締切済み
スタイルシートのレイヤーに乗せた画像を動的に表示する方法
<div id="test" style="position=absolute; top=400px; left=200px; z-index=10;"><img src="gazou.gif"></div> 上記を動的に表示するために以下の方法を考えました var element = document.createElement('div'); element.id = "test"; element.style = "position=absolute; top=400px; left=200px; z-index=10;"; element.innerHTML = '<img src="gazou.gif">'; var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element); しかしこれだと、element.style = "position=absolute; top=400px; left=200px; z-index=10;"; の部分がまずいらしく動作しません。 どのようにすればよいでしょうか。 よろしくお願いします。
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
すみません、セミコロンじゃなくて、コロンでした。 一応確認したいのですが、「動作しません」というのはどういうことでしょうか。 elementはbodyに挿入されるがスタイルシートは適用されない、ということでいいですか?( getElementsByTagName().item()が機能しないブラウザもありますので) だとすると、position:absoluteだけを指定したり、 element.style="position:absolute"; プロパティを1つずつ指定した場合は適用されますか? element.style.position='absolute'; element.style.top='400px';
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
element.style = "position:absolute; top:400px; left:200px; z-index:10;"; style属性(JavaScriptの言い方ではstyleプロパティ)はセミコロンです。
補足
style属性はセミコロンとはどういう意味でしょうか element.style = "position:absolute; top:400px; left:200px; z-index:10;"; と、変えてみても動作しませんでした
関連するQ&A
- 画像を重ねて表示する方法を知りたいです。
おせわになっております。 下記のようなソースを作りました。 ------------------------------------------------- <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
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか? ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 重なった画像にクリックイベントを発生させたい
いつも大変勉強させていただいております。 かさなった画像にクリックイベントを発生させたいと 苦心しておりますが、うまくいきません。 スタイルシートのz-indexプロパティーで 重なり位置を指定しました。 以下のような記述です。 <!-- 画像1 --> <DIV style="top:117px;left:360px;position:absolute;z-index:1;"><IMG src="00464.png" width="100" height="100" border="1"></DIV> <!-- 画像2 --> <DIV style="top:117px;left:360px;position:absolute;z-index:2;"><a href="#" OnClick="javascript:ZoomWin('00464.png');"><IMG src="big.gif" width="42" height="41" border="0"></a></DIV> 00464.pngとbig.gifという画像が重なっていて、 それぞれz-indexで指定しています。 big.gifをクリックすると、ZoomWinという関数を 発生させて、新規ウインドウを 立ち上げたいのですが、 リンクすらはれないのです。 z-indexを指定しただけでは、 <a>タグはつかえないのでしょうか? ほかに代替案があればおしえてください。
- 締切済み
- JavaScript
- 動いている画像へのリンクは可能でしょうか?
画像を動かし、そこにリンクを貼りたいのですが可能でしょうか? 下のソースの中にリンクを埋め込みたいのですがどうやっても うまくいきません。根本的にやり方がちがうのでしょうか・・・。 document.write("<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: " + m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src=" + img_name + " ></div>");
- ベストアンサー
- JavaScript
- 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
- FireFoxで画像がずれます
ホームページビルダーでHPを作成しました。IEで動作確認後、FireFoxで見ると、 画像がの位置が設定と違います。画像が上にずれているんです。どうしてそうなるのでしょう?どなたか教えてください 記述は <DIV style="top : 929px;left : 35px; position : absolute; z-index : 6; " id="Layer5"><IMG src="0161.gif" width="82" height="33" border="0"></DIV> です。 よろしくお願いします。
- ベストアンサー
- HTML
- 複数のfunctionをonclickで実行するには?
こんばんは。 複数のfunctionを実行するにはどうしたらいいんでしょうか? 後、追加でなんですが、areaにhref属性を使わず(#を指定すると、ページの上に戻ってしまうため)にポインタを指(リンクに乗せたときのやつです)にするにはどうすればいいんでしょうか? インラインフレーム1 <script> <!-- function change1(picname) { parent.frames['インラインフレーム2'].document.getElementById("ID1").src = picname; } function change2(picname) { parent.frames['インラインフレーム2'].document.getElementById("ID2").src = picname; } ・・・ function change3(picname) { parent.frames['インラインフレーム2'].document.getElementById("ID8").src = picname; } //--> </script> 上のfunctionを複数実行したいんです。(全てではありません) <map name=""> <area shape="rect" coords="0,0,0,0" alt="" onclick="change1('ファイル')"> ・・・ <area shape="rect" coords="0,0,0,0" alt="" onclick="change8('ファイル')"> </map> インラインフレーム2 <div style="position: absolute; top: 0px; left: 0px; z-index: 0;"><img src="ファイル" id=ID1 alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 1;"><img src="ファイル" id=ID2 alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 2;"><img src="ファイル" id=ID3 alt="" border="0"></div> ・・・ <div style="position: absolute; top: 0px; left: 0px; z-index: 8;"><img src="ファイル" id=ID8="0"></div> どうでしょう? 自分なりに試してみたんですが、成功しませんでした。(onclickにいっぱいくっつけたりとか・・・) どうかお願いします。
- ベストアンサー
- JavaScript
- センタリングのHTMLの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のHTMLは横並びに写真を載せたもの(数行あります)です。(上部に文章を載せるための式がありますが、カットしています。)このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </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="Back"></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>
- ベストアンサー
- ホームページ作成ソフト
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示(divタグ)をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか? 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- スタイルシートでスクロールは可能ですか?
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
補足
スタイルシートが適用されないのではなく全体の処理が止まってしまいます (問題の箇所を抜いて実行した場合、スタイルシートなしで画面左上に画像が表示されます) また、その二つの方法だと同様に処理がとまってしまいました