スレッド表示 | フラット表示〕 全トピック 920 件中 747 番目 次≫ ≪前

PHP+JavaScript

created: 2003-11-11 11:01 | modified: 2003-11-13 09:13 | reply: 15

[959] PHP+JavaScript

user: naonao ホームページ | created: 2003-11-11 11:01
初めまして。
最近PHPに興味を持ち、少しずつ設置してます。

写メール掲示板を使ってるのですが
その中にJavaScriptで画像をランダムに
表示し、かつそれを左下に配置したいのですが
どうしても画像が左上に表示されてしまいます。
ランダムで表示させる事は出来たのですが
画像を左下に何とか持っていくやり方は
あるでしょうか?
どなたか知恵をお貸しください。
URLがその使ってる写メールBBSです。
reply: 961 返信 編集 削除

[961] 先ずはHTMLで。

user: ゆうじ | created: 2003-11-11 12:13
こんにちは。

お知らせいただいたURLに、PCからアクセスしてみましたが、
リダイレクトされ続けてるようで、
残念ながら確認できませんでした。
(写メールBBSってことで、PCからはアクセス出来ないのかな?)


とりあえず、PHPではなく、
クライアントサイドの問題だと思いますので、

先ずは、ランダム表示ではなく、
HTMLで普通に画像を左下にレイアウトしたうえで、
JavaScriptを使って画像をランダム表示するように
変えてみてはいかがでしょうか。

こういうことではないのかな?
Parent: 959  reply: 963 返信 編集 削除

[963] スミマセン!

user: naonao ホームページ | created: 2003-11-11 12:39
アドレスが間違ってたようです。
お手数かけてスミマセンでした。

分かりにくくてすみません
私のやりたい事、と言うのはphpの中に
JavaScriptを埋め込みたいのです。
この写メールBBSはphpファイルで、その中に
htmlが書き込まれてるんです。
なのでhtmlファイルと言うのはなく、phpの中に
htmlソースが書き込まれてるのです。
私がやった事は以下のスクリプト<script type="text/javascript">
<!--
bgimg = new Array();
bgimg[0] = "0.jpg";
bgimg[1] = "1.jpg";
bgimg[2] = "2.jpg";
bgimg[3] = "3.jpg";
bgimg[4] = "4.jpg";
bgimg[5] = "5.jpg";
chip = Math.floor(bgimg.length * Math.random());
document.body.background = bgimg[chip];
// -->
</script>
をphpの中の<body>?</body>に入れ、<head>?</head>の中に
左下固定のソースを入れたのですが…。
どうしても画像が左上に来てしまうのです。
Parent: 961  reply: 965 返信 編集 削除

[965] 左下にありましたが。

user: ゆうじ | created: 2003-11-11 14:23
すみません。私も言葉が足りませんでした。
最終的にブラウザに出力されるのは、HTMやCSS、JavaScriptなので、
たとえPHPスクリプトの中に記述してあったとしても、
ページのレイアウトやデザインを行うのは
PHPでないことを伝えたかったのでした。


さて、ページを拝見させていただきましたが、
私が見たところ、左下に表示されていますよ。
確かめたブラウザは、
IE6、Opera6.05、Netscape7.0 です。

naonaoさんのブラウザのキャッシュ内容が
更新ボタンを押しても更新されず、
古いものが表示されているだけではないでしょうか。
該当するPHPスクリプトのタイムスタンプを
更新(書き換えせずただ上書き保存とか)して
ブラウザで再読み込みしたら直りませんか。
Parent: 963  reply: 966 返信 編集 削除

[966] css に body セレクタが2つあります

user: ゆうじ | created: 2003-11-11 14:32
ページのHTMLソース良く見てみると、
body のスタイルを定義しているところが
2箇所ありますね。

同じセレクタが存在する場合は、
設定したスタイルが上書きされたり、されなかったり、
ブラウザによって挙動が違いますので、
これをひとつにまとめると良いと思いますよ。
Parent: 965  reply: 973 返信 編集 削除

[973] まだダメです。

user: naonao ホームページ | created: 2003-11-12 10:36
おはようございます。
こちらこそ言葉足らずですみません。
色々いじってみましたがやはり
背景画像左下固定が効きません。
もうちょっとな気はするのですが…。

ちなみに今の状態は背景画像はランダムで変わります。
でも画像が左上に固定されてしまってます。
Parent: 966  reply: 974 返信 編集 削除

[974]

user: naonao ホームページ | created: 2003-11-12 10:54
ちょっと色々いじってるので画像が消えています。

なんとなくですが、JavaScriptの埋め込み場所が
問題なような気もします。
PHPの中に埋め込むやり方ってあるのでしょうか?
Parent: 973  reply: 975 返信 編集 削除

[975] くどいようですが今回PHPは無関係です。

user: ゆうじ | created: 2003-11-12 11:18
> なんとなくですが、JavaScriptの埋め込み場所が
> 問題なような気もします。
> PHPの中に埋め込むやり方ってあるのでしょうか?

PHPにしてみれば、HTMLもCSSもJavascriptもXMLも、
ただのデータ(文字の集まり)でしかありませんので
ここでは一切PHPは関係ありません。


以前私が見た時(記事[965])には、
左下に画像が表示されていましたよ。

画像をランダムに替えるJavascriptの記述位置ですが、
わたしなら、<head>?</head>この間で、
且つ、スタイル設定よりも下に記述します。
Parent: 974  reply: 977 返信 編集 削除

[977] Re.くどいようですが今回PHPは無関係です。

user: naonao ホームページ | created: 2003-11-12 13:12
> PHPにしてみれば、HTMLもCSSもJavascriptもXMLも、
> ただのデータ(文字の集まり)でしかありませんので
> ここでは一切PHPは関係ありません。
なるほど、良く分かりました。

> 画像をランダムに替えるJavascriptの記述位置ですが、
> わたしなら、<head>?</head>この間で、
> 且つ、スタイル設定よりも下に記述します。
そうですよね、位置的にはそこですよね…。
ですが、左下で固定されません。
どこか設定が間違ってるのでしょうか…。
Parent: 975  reply: 979 返信 編集 削除

[979] DHTM 背景画像

user: ゆうじ | created: 2003-11-12 14:19
JavaScriptファイルを覗かせていただきました。
documennt.write で img タグを書き出せば、
単純に画像を表示させているだけですので、
書き出した位置(左上)に画像が表示されて当然です。
スタイルの動的な切り替えは、
DHTML で行うものだと思います。

以下コードです。
bodyタグのIDを main と決めたら、
#main {.....} で bodyタグのスタイルを設定し、
document.all(main).style.backgroundImage で背景画像を
動的に切り替えるという仕組み(?)です。

javaScript も DHTML も最近使ってないので、
うろ覚えで書いたうえ、テストしていませんので
必ず確認してくださいね。

●JavaScriptファイル
ranimg = new Array()
ranimg[0] = "skin/sheep.jpg"
ranimg[1] = "skin/sheep1.jpg"
ranimg[2] = "skin/sheep2.jpg"
ranimg[3] = "skin/sheep3.jpg"
ranimg[4] = "skin/sheep4.jpg"
ranimg[5] = "skin/sheep5.jpg"
xx = Math.floor(ranimg.length*Math.random())
document.all(main).style.backgroundImage = ranimg[Math.floor(xx)] // IEのみ

●スタイル設定部
#main {
background-attachment:fixed;
background-repeat:no-repeat;
background-position:left bottom;
background-color:#FFFFFF;
color:#6A6A6A;
font-size:10px;
line-height:150%;
font-family:Osaka,Verdana,MS UI Gothic;
margin:0px;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#DB7093;
scrollbar-base-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#DB7093;
scrollbar-shadow-color:#DB7093
}

●ボディータグ
<body id="main">

「DHTML 背景画像」
をキーワードにGoogleで検索すると、
参考になるサイトが沢山引っかかります。
Parent: 977  reply: 980 返信 編集 削除

[980] 訂正

user: ゆうじ | created: 2003-11-12 15:54
やはりうろ覚えでは動きませんでした。すみません。
JavaScriptファイル とボディータグを訂正します。
IE6でテストOKでした。

●JavaScriptファイル
ranimg = new Array()
ranimg[0] = new Image()
ranimg[1] = new Image()
ranimg[2] = new Image()
ranimg[3] = new Image()
ranimg[4] = new Image()
ranimg[5] = new Image()
ranimg[0].src = "skin/sheep1.jpg"
ranimg[1].src = "skin/sheep1.jpg"
ranimg[2].src = "skin/sheep2.jpg"
ranimg[3].src = "skin/sheep3.jpg"
ranimg[4].src = "skin/sheep4.jpg"
ranimg[5].src = "skin/sheep5.jpg"
xx = Math.floor(Math.random()*ranimg.length)

function chgBgImage()
{
if(document.all){
document.all('main').style.backgroundImage = "url(" + ranimg[xx].src + ")"
}else if(document.getElementById){
document.getElementById('main').style.backgroundImage = "url(" + ranimg[xx].src + ")"
}
}

●ボディータグ
<body id="main" onLoad="chgBgImage()">
Parent: 979  reply: 984 返信 編集 削除

[984] 無事出来ました!

user: naonao ホームページ | created: 2003-11-13 00:35
ゆうじさん、ありがとうございます!
無事出来ました。
DHTMなのですね。勉強になりました。
早速暇な時にでも検索かけてじっくり見ようと思います。

ただどうしてか、本文の文字が
大きくなってしまって…。前のサイズに戻したいのですが
戻らず…。(文字サイズ「中」で見るとかなり
大きいので直したいのですが…)
font-sizeをいじっても変化するのは
1番下の部分です。一番下の部分の大きさと
本文を合わせたいのに上手くいかないのです。
そのままコピペしただけで特に変えてはなかったのですが…。
Parent: 980  reply: 985 返信 編集 削除

[985] <body>タグが2つあります。

user: ゆうじ | created: 2003-11-13 00:59
HTMLソースを見ると、</head> よりも上に、
<body id="main" onLoad="chgBgImage()">があります。
これを入れ替えて、余分な<body>を削除してみてください。

これで直るかな。


それと、
DHTM は DHTML の間違いでした。すみません。
Parent: 984  reply: 986 返信 編集 削除

[986] あれれ…。

user: naonao ホームページ | created: 2003-11-13 01:15
すばやい返事ありがとうございます。

> <body id="main" onLoad="chgBgImage()">があります。
> これを入れ替えて、余分な<body>を削除してみてください。
うーん、やってみたのですが変化なしです。
<body>=<body id="main" onLoad="chgBgImage()">ですよね?

すみません、頭が働かなくなって来ました。
明日又ココに来ます。
Parent: 985  reply: 987 返信 編集 削除

[987] textセレクタ

user: ゆうじ | created: 2003-11-13 01:22
スタイル設定部にあったはずの
.text セレクタが消えてますね。
間違って削除してしまったのでは。
Parent: 986  reply: 988 返信 編集 削除

[988] 解決です

user: naonao ホームページ | created: 2003-11-13 09:13
おはようございます。

どうやら一気にコピペした時に誤って
消しちゃったようです。
元ファイルから持って来て無事大きさが元に
戻りました。ありがとうございました。

色々とお手数かけました。
もっともっと勉強せねば…。
Parent: 987  返信 編集 削除
スレッド表示 | フラット表示〕 全トピック 920 件中 747 番目 次≫ ≪前
ページの一番上へ
Googleグックマークに登録 Yahooグックマークに登録 livedoorクリップに登録 @niftyクリップに登録 はてなブックマークに登録 deliciousに登録 Buzzurlに登録 FC2ブックマークに登録
最近更新された掲示板トピックス
管理人Blog
Yahoo Search

最近更新したNote
PHPマニュアル
今日のブックマーク
PHPマニュアル関数検索
関数名を入力し検索ボタンをクリック↑