解決済
画像をページ更新されるごとに変化させたいのですが・・・
先日こちらでほぼ同じ内容の質問がされていて、いろいろと試してみたのですが、どうにもこうにも上手くいきません。
類似質問→
上部の画像をページ更新毎に変化させるという点で、
以下のブログサイトと構造的には全く同じにしたいのです。
→
私は、指定テンプレートのスタイルシートHTMLを自分でいじってブログのページを設定しています。
ソースをいじれるわけではありません。
部分的というか、端的に言ってしまえば、
～～
#banner{
margin:0px;
text-align:left;
background-image:url(画像url);
background-repeat:no-repeat;
height:324px;
}
～～
の「画像url」の画像を、ページ更新毎に変化させたいのですが、
どうやれば変化させられるのでしょうか？
HTMLに関して素人同然なので、
これでうまく質問をできているのかすらも判断できませんが、
よろしくお願いします。
回答(1)
1.
動くかどうかわからないが
と
document.getElementById("banner").style.backgroundImage = "url(" + bgrounds[array_num] +")";
ありがとうございました！
コメント(14)
まず理解して欲しいのが、あのコードはあのブログパターンにだけ有効です。それぞれブログデザインは独自にいろんな区切り方をしてその区切りに独自で色々それらしい名前をつけているわけです。
表紙画像がある場所付近のタグがなんていう名前のid名なのかそこからどうやって追っていくと表紙画像を設定しているタグにたどりつくのかが問題です。それがわからないと設定しようがありません。
質問する時には、まずはあなたのブログアドレスから。
（若しくはブログのデザインパターンの名称）
早速のご返答、ありがとうございます。
ご紹介していただいたページは何度も読んでいまして、
散々いじくりまわしてみたものの変化なく・・・でした。
私のブログアドレスは、内容がくだらなさすぎて載せたくないので
（ただ単に恥ずかしいので）
同じデザインのページを立ち上げました。
記事内容が、私がいじったスタイルシートのHTMLです。
ピンク文字の部分が画像を変えたい所です。
よろしくお願いします！
http://moem92tco.seesaa.net/?1244531063
もしかして最後に
//--></script>入れてなかったりしますか？入れてないとうまく作動しないかも。
（書き忘れました。。。）
なんだ。livedoorブログではないわけですね。
質問のブログアドレスがほしいのは同じデザイン設定にしてこちらで実験してちゃんと再現できるか調べたかったからです。
seesaaは僕は契約してないのでなんとも。
ここにもフリーエリアか何かでJavascriptを貼れるんですよね？
そしたら、以下をJavascriptに入れて確認していただけませんか？
<script type="text/javascript"><!-- //--></script>で囲んだ中に行を入れて
・alert("hello");
まずJapvascriptができること(できればhelloとアラートが出ます)
・alert(document.getElementById("banner").outerHTML);
DOMができることと<div id="banner">が取得できていること
(できていれば#2のリンク先で
<div id="banner"> </div>とアラートされます。）
・alert(document.getElementById("banner").style.backgroundImage);
変更するurlを取得できるのか
（できていればリンク先のピンクのurlがアラート表示されます）
どこかでエラーになりませんか？
livedoorブログではないのです。
しかし、ここ以外で質問できる場所が見つからなくて、
こちらで質問させていただきました。すみません。
思っていたやり方とは違いますが、
helloのアラートを出す事は出来ました。
http://moem92tco.seesaa.net/?1244564992
が、alert(document.getElementById("banner").outerHTML);をはめてみたところ、
undefinedのアラートが出てしまいます。
いかがなものでしょう・・・
outerHTMLつかえないですか。。。
ああソースを見ると
<div id="banner>内に、Javascriptが埋め込まれるんですね。
それなら
・alert(document.getElementById("banner").innerHTML);
で
<script type="text/javascript">
<!--
alert(document.getElementById("banner").innerHTML);
// -->
</script>
（と余白）がアラートされますか？
innerHTMLは大丈夫ですよね。。。
飛ばして
・alert(document.getElementById("banner").style.backgroundImage);
でもいいです。
>>#7
alert(document.getElementById("banner").innerHTML);を入れてみたところ、
ちゃんとアラートは表示されました。
http://moem92tco.seesaa.net/?1244597373
ですが、#8のalert(document.getElementById("banner").style.backgroundImage)と入れると、空白のアラートが表示されました。
>>プーニンがちょとっこ戻ってきましたが何か さん
>>BLUEPIXY さん
ここのコメントをヒントに、いろいろいじってみたら
なんとか自力で出来ました！
とても丁寧に説明して下さっていたのに、
なんだか振り回してしまった結果になってすみません。
本当にありがとうございました！！
また何かあったら、何卒、宜しくお願いします。
うまくいって良かったデスね。
#10>#8のalert(document.getElementById("banner").style.backgroundImage)と入れると、空白のアラートが表示されました。
<div id="banner" style="background-image:…">…
とかエレメントに直接スタイルが設定されている場合に有効です。
この場合は直接書かれていないので中身は無しになります。
Firefox の場合。その要素に適用されているものを調べるには、getComputedStyleを使います。
getComputedStyle(document.getElementById("banner"),null).backgroundImage
のようにすると、現在設定されている背景画像を知ることができます。ＩＥの場合は、currentStyle を使って以下の様にします。
document.getElementById("banner").currentStyle.backgroundImage
そうなんですか。いつもIE仕様で済ませちゃってるんで混乱させちゃったかも。
ちなみに今そのページ見ると表示されるものはされますがされないバッテン画像もあるのは何だろ？
background-image:url(画像url);
はCSSで消しておかないと一瞬元画像が見えますよ。
