- ベストアンサー
Win XPでテキストにタグ打ちでHTMLファイルを作成する方法
- Win XPでテキストにタグ打ちでHTMLファイルを作成する方法について質問させていただきます。具体的には、風景の画像を並べる方法と、画像の上にバスを走らせて止まらせる方法について教えていただきたいです。
- また、この質問では壁紙に既に他の画像が貼り付けてあるが、左端のみカットして他は白色にしたいという要望もあります。
- これまで色々試してみたがうまくいかず、具体的なタグや設定方法がわからない状況です。どなたか教えていただけないでしょうか？
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
>#bus {position:relative;z-index:10;top:-120px;left:10px;} >これも変えました。 が、、、 left:10px;} の数字を色々変えたんですが (*^^*ゞなんか同じところから出発してるような気が・・・ えっーと、初期設定はCSSの left:10px; のところで行われますが 関数が動いた瞬間に制御は javascript に移ります。 なので、leftの数字と同じ数字に javascript 内の指定も変える必要があります。 場所は２ヶ所 var timer;i=0; ⇒ var timer;i=**; if(i==900){i=0;} ⇒ if(i==900){i=**;} **のところをleftと同じにします。 ちなみに i==900 のところが終点の指定です。 900pxの意味です。800に変えれば100px手前で 始点に戻るようになります。 サーバーにアップしたらアドレスをメールで教えてください・・・・できればですけど。 では・・・・。
その他の回答 (5)
- arenani_sorenani
- ベストアンサー率73% (58/79)
ID+「@mail.goo.ne.jp」がアドレスですね・・・ だから、ここに出入りしてる人全員、 メルアド晒してることになります。 あなたもメールアドレス持ってますよ。 知ってました？ 何か変なシステムですよねぇー わたしも最近ここに来て、暇な時に回答するようになりました。 ホームページ試作版、できあがったようで、よかったです。
お礼
アドレスの件、あ～～そういうわけでしたか・・・ (;^_^A・・・ 大変お世話になりありがとうございました～♪ 本当に助かりました。心から御礼申し上げます。
- arenani_sorenani
- ベストアンサー率73% (58/79)
背景を真ん中へ .x を以下のように変更 .x{height:200px;position:relative;margin-left:auto;margin-right:auto;text-align:center;} 更に<table...>～<img...>を以下のよう7に<div>で囲みます <div class="x"> <table...> . . <img.....> </div> これでセンタリングされるはずです。 #bus {position:absolute;z-index:10;top:50px;left:50px;} は間違いです。 #bus {position:relative;z-index:10;top:-50px;left:50px;} ＊absolute を relative に変えます。 （top:-50px は適当です。様子を見ながら地面に合せて・・） できたら見てみたいです・・では。
お礼
.x 変更いたしました。 センタリングもバッチリできました。 #bus {position:relative;z-index:10;top:-120px;left:10px;} これも変えました。 が、、、 left:10px;} の数字を色々変えたんですが (*^^*ゞなんか同じところから出発してるような気が・・・ 試験的なhtmlファイルで作っていまして 私も是非見ていただきたいです。 arenani_sorenaniさんだけが見れる方法って・・・ なんかありますか？メールもダメですしね。。。 アップロードするしかないですか？ いっぱい教えていただいて感謝、感動ものです。m(_ _)m 。。。
- arenani_sorenani
- ベストアンサー率73% (58/79)
CSSの記述が間違ってました。 × table{height:200px;position:absolute;top:0px;} ○ .x{height:***px;position:relative;}
- arenani_sorenani
- ベストアンサー率73% (58/79)
バスの画像はいいのがなかったのですが 実際に使う場合はGIFかPNG(8ビット)で背景を透過色にして下さい。 <script>～</script>は現在javascriptを使っていないなら そのままコピーして<head>～<head>間に入れてください。 使われている場合は変数などの重複が起きる可能性が ありますので ソースを貼ってください。 このとき<body>を<body onload="start()">に変更してください。 これが動く引き金になりますので忘れないように。 <table>～<img...>までをコピーして好きな場所に貼って下さい。 またCSSをお使いでなければ<style>～</style>間をコピッて <head>内に貼り付けます。CSSを使っているようなら重複に 気をつけて加工してください。 このとき、 ・bodyはなくてもＯＫです。 ・tableは背景画像のheightに変更。 position:absolute;はposition:relative;に変更。 top:0px;は消してください。 ・.yは画像の幅と高さに変更。 ・#busはposition:absolute;はposition:relative;に変更。 さらに位置を見ながら、top:100pxを-＊＊px変更。 必ずマイナスの数字にします。(上に重ねる為) 背景写真の裏に隠れる場合はz-indexを大きくします。 バスの速さはご指摘の通りです。大きくすると遅くなります。(２ヶ所あり） src_bk1は背景左、src_bk2は背景右です。"image/hukei01.jpg"など変更してください。 src_busも同様です。 走る間隔は 開始がCSSのleftの指定位置(現在0px)とi=0です。 終了がif(i==900){i=0;}の900です。 では、頑張ってください・・
お礼
詳しく書いてくださってありがとうございます～♪ <htm> <head> <style> body {margin:0px;} .x{height:150px;position:relative;} .y {width:150;height:80px;} #bus {position:absolute;z-index:10;top:50px;left:50px;} </style> このように変更しまして バスも背景画像も入れ替えました。 top:100pxを-＊＊px変更。必ずマイナスの数字にします これなんですが今バスは走る位置も、トップからも50pxでちょうど良い位置に来ています。 ところが 背景画像が 左にぴったりとくっついています。センターに置くには どこを変更すればいいですか？ たびたびすみません。m(_ _)m 。。。 貼り付ける位置もよく分かりました。
- arenani_sorenani
- ベストアンサー率73% (58/79)
取あえず作ってみました・・ CSSとjavascriptを使ってます。 判らないところがあれば聞いてください。 <htm> <head> <style> body {margin:0px;} table{height:200px;position:absolute;top:0px;} .y {width:480;height:200px;} #bus {position:absolute;z-index:10;top:100px;left:0px;} </style> <script> var timer;i=0; src_bk1="http://download.computers.yahoo.co.jp/download/jcnland/photo/town/park/3404000031.jpg" src_bk2="http://download.computers.yahoo.co.jp/download/jcnland/photo/town/park/3404000031.jpg" src_bus="http://download.computers.yahoo.co.jp/download/jcnland/clip/automotive/car/3009000009.jpg" function start(){ bk1.src=src_bk1 bk2.src=src_bk2 bus.src=src_bus timer=setTimeout("move_bus()",50); } function move_bus(){ bus.style.left=i; i+=10; if(i==900){i=0;} timer=setTimeout("move_bus()",50); } function stop_bus(){ clearTimeout(timer); } </script> </head> <body onload="start()"> <table class="x" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img class="y" id="bk1" /></td> <td><img class="y" id="bk2" /></td> </tr> </table> <img id="bus" onMouseOver="stop_bus()" onMouseOut="move_bus()" /> </body> </html>
お礼
さっそくの回答、ありがとうございます～♪ すばらしぃ～～です。 2枚の画像の上を赤い車が走り抜けました。 onMouseで止まりました。 で、<head>は今すでにある headの中に入れていいですか？ <body>は今すでにある bodyのこの画像を載せたい所に埋め込むのでしょうか？ テーブルの大きさは width:480;height:200px;} ここの数字を変えるんですか？ バスをゆっくり走らせるには ("move_bus()",50); ここの数字を変えるんですか？ src_bk1="http://download.computers.yahoo.co.jp/download/jcnland/photo/town/park/3404000031.jpg" ここは src_bk1="ＨＰ内のファイル/hukei01.jpg"でいいんですよね？ 色々質問して すみません。 m(_ _)m 。。。
お礼
left、timer、i= の数字を変えても あまり変わらないので思い切って マイナス80 としてみたら いいカンジになりました。サーバーにアップもしました。 ここに質問するのは初めてでよく分かってないんですがarenani_sorenaniのメルアドがわかりません。 こちらのメルアドを書いたら・・・あとで削除できますか？ m(_ _)m 。。。