背景画像を更新ボタンを押すごとに変化させたい

Java"script"な

length-1 ]){の"]"はタイプミスなので削除してねorz

/* =============================================== */
/** 03. Title - ブログタイトルエリア */
/* ----------------------------------------------- */
#container .blog-title-outer {
width: 870px;
height: 300px;
margin: 0 auto;

background: url(http://image.blog.livedoor.jp/lovehima1/imgs/6/f/6...) no-repeat;
text-align: left;
}

#container .blog-title-outer h1 {
margin: 0;
padding: 125px 0 0 340px;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #000;
}

#container .blog-title-outer h1 a {
color: #000;
text-decoration: none;
}

#container .blog-title-outer .blog-description-outer {
margin: 0;
padding: 10px 0 0 340px;

font-size: 12px;
color: #000;
line-height: 1.3;
}

コードとはJavaScriptのソースコードのことです。
たとえばこんな感じの。

<script type="text/javascript">
<!--
ranimg = new Array();
ranimg[0]="画像1のURL";
ranimg[1]="画像2のURL";
ranimg[2]="画像3のURL";
xx = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(xx)];
document.write('<img src="'+ ranimg +'">');
// -->
</script>

imqさんありがとう御座います。
私が他サイトで見かけたのはそのコードです。
ライブドアのＣＳＳに組み込ませるにはどうのようにすればいいのかが分かりません。
＃３のコメントに置いてるのが、ブログのタイトルエリアのシートになります。見当違いだったらすいません。

これはトップページの部分のコードです。
どこがどうなのか分からないのでそれっぽいとこを貼ります>.<

<!-- ............... Header ............... -->
<$BlogHeader$>

<!-- ............... Container ............... -->
<div id="container">

<!-- ..... Title ..... -->
<div class="blog-title-outer">
<div class="blog-title-outer-2">
<div class="blog-title-outer-3">
<h1 id="blog-title"><a href="<$BlogUrl$>" title="<$BlogTitle ESCAPE$> トップへ"><$BlogTitle ESCAPE$></a></h1>
<div class="blog-description-outer"><p id="blog-description"><$BlogDescription$></p></div>
</div>
</div>
</div>

<div id="content" class="hfeed">
<!-- ..... MainColumn ..... -->
<div id="main" class="column">
<div class="column-inner">
<div class="column-inner-2">
<$IndexNavigator$>

ベストありがとう。

>>#3はCSSでレイアウトの設定の部分です。
>>#4でimgさんが示してるようなものです。

ＣＳＳでの設定ですか。
あろーずさんのいう「背景画像の入れ替え方法」というのはどういったものだったのでしょうか？単にＣＳＳの

 background: url(http://image.blog.livedoor.jp/lovehima1/imgs/6/f/6...) no-repeat;

Javascriptで「動的に」(ユーザーの操作でプラグラムが臨機応変に動く)動かすなら、
フリーエリアというプラグインを追加して、そこにJavascriptのコード（プログラム）を追加しないといけません。

幸いDOMというAPI(全体で何かをうまく機能させるためのプログラムの集合体とその命令郡)でCSSを動かすメソッド（命令コード）が用意されてます。

多分これですね
backgroundImageプロパティ
http://jsajax.com/BackgroundImageArticle526.aspx

このメソッドを利用して

 background: url(http://image.blog.livedoor.jp/lovehima1/imgs/6/f/6...) no-repeat;

ああ、ちょっと待って。
背景といってもWindow全体の背景ではなくて
CSSでいう.blog-title-outerのbackgoundimageを変えなきゃいけないのか。

とりあえずできそうだ。途中経過

やっつけでもいいよねｗ

そのブログタイプの表紙画像を変えるのは

 var obj = document.getElementById("container").childNodes[1];

 <div id="container">
 |-<!-- ..... Title ..... -->
 |-<div class="blog-title-outer">
 |-<div class="blog-title-outer-2">
   ・・・・

その後、その階層のstyle

 background: url(http://image.blog.livedoor.jp/lovehima1/imgs/6/f/6...) no-repeat;
 text-align: left;
 }

 obj.style.backgroundImage = "url(http://parts.blog.livedoor.jp/img/usr/lovely_xmas/header.jpg)";    

とりあえずは、ブログパーツにフリーエリアを追加して、下のコードをそのまま貼り付ければ今の流れを確認できると思う。
最初にCSSで指定されてる表紙画像が出て、Helloのアラートが表示される。でOKすると表紙画像がクリスマスのやつに変わるよ。

 <script type="text/javascript"><!--
 alert("hello");
 var obj = document.getElementById("container").childNodes[1];
 obj.style.backgroundImage = "url(http://parts.blog.livedoor.jp/img/usr/lovely_xmas/header.jpg)";    
 --></script> 

できた。コメントに入らないので分割で

 <script type="text/javascript"><!--
 var bgrounds = new Array('http://parts.blog.livedoor.jp/img/usr/lovely_xmas/header.jpg','http://parts.blog.livedoor.jp/img/usr/t_butterfly_reki/header.gif','http://parts.blog.livedoor.jp/img/usr/prison_break_3c/bg_body.jpg','http://parts.blog.livedoor.jp/img/usr/kamiki_aya/main.jpg','http://parts.blog.livedoor.jp/img/usr/hanamonogatari/header.jpg','http://parts.blog.livedoor.jp/img/usr/bt011_tulip_girl/entry_bottom.gif');
 //bgrounds:背景画像URLの配列
 var array_num = Math.floor( Math.random() * bgrounds.length);
 //配列の中でランダムに配列ナンバー

 var obj = document.getElementById("container").childNodes[1];
 //<div id="container">下階層の2番目にある<div class="blog-title-outer">エレメントのノード取得
 obj.style.backgroundImage = "url(" + bgrounds[array_num] +")";    
 //取得ノードで背景イメージをCSSにて変更
 //--></script> 

補足：
・このコードはあのデザインタイプでしか使えません。
(上に書いたようにデザインによって構造が違っていて、背景画像URLの収まってるCSSがどのノードのものか変わってくるため)
・URLはいくつ入れてもいいように設定してある。
・CSSの方で
>background: url(http://image.blog.livedoor.jp/lovehima1/imgs/6/f/6...) no-repeat;
の行は消してください。
（一度もとのやつが見えてから切り替わってしまうので）
・途中で処理をはさんでるので画像が1テンポ遅れで表示されます。
・コードがヘタレなのかなんなのかたまにランダム画像が表示されない時があります。（途中でアラート入れて確認するとこの不具合は起きないから不思議）リロードすればそのうち本来の画像が出るはずです。

ベストもらったのになんだか頼りないですが一応形にはしてみました。
他の方でいいやり方があれば補足してくださいorz

以上

プーニンさん有難う御座います！
何枚でもURLを貼れるのもいい感じです♪

ただ、やはり最初の「１テンポ」が気になってしまうのですが、#4のimqさんが貼ってくれてるようなVer.にすると、そういのも解消されるのでしょうか？

更にもうワンプッシュなお願いで申し訳ないです。
もちろん今のでも大満足です♪
ありがとう御座いました！

imqさんのコードとほぼ同じですよ。
imqさんのは単純なHPに書いてある要素（文字・画像etc）の最後にイメージを追加するコードなので、表紙画像は変えることはできません。（まあよくあるJavascriptのサンプルをこんなものでは？と提示してもらったんだと思います）
処理の遅さはDOM使っている点ですかね。Javascriptやってたのも数年前だし、今じゃ色々調べればもっといいAPIがあるみたいですから（JQueryとか）そっちで同じ作業を作り直せばできるんじゃないでしょうか。おじさんはそれが世に出たときはもうJavascriptやってなかったのでやっつけではどんなメソッドがあるのかもわからず使いませんでした。

調べたらlivedoorでもhttp://blog.livedoor.jp/eeu/archives/55095489.htmlのようなサイトがあり、コメントしてくれてるimqさんの名もあったので、ナレにいる人かもね。サイトに行って声をかけてみて教えてもらってもいいかもしれません。

ブログタイトルのすぐ後ろにJavaScriptを設置するといいです。

フリーエリアは削除して、
「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の各テンプレートにある

<div id="content" class="hfeed">

var obj = document.getElementById("container").childNodes[1];
obj.style.backgroundImage = "url(" + bgrounds[array_num] +")";

var obj = document.getElementsByTagName('div');
for(var i = 0; i < obj.length; i++)
  if(obj[i].className == 'blog-title-outer')
    break;
obj[i].style.backgroundImage = "url(" + bgrounds[array_num] +")";

プーニンさんありがとう！
そして、imqさんもありがとう！！
ナレを振りまきたいくらい感謝しています♪

早速ためしたところ、ページもサクサク表示されとてもスッキリしました^^

またヘンピな質問するかもですが、その時はまたよろしくお願いします！！

あああ、しいて言うなら、更新を押すとブラウザの左下にエラーが出るようになったことくらいでしょうか。別になにか問題があるわけではないのですが、毎回出るので気になります・・orz

ライン4
文字367
エラー:終了していない文字列型の定数です。
コード:0
URL:　http://blog.livedoor.jp/lovehima1/

毎回というわけではないのですが、頻度が高めに感じます。
不要なプラグインを設置してるかもなのですが・・・

前後はこのようになってます(文字数オーバーのため2分割)

</div>
</div>
</div>

<script type="text/javascript"><!--

var bgrounds = new Array('http://image.blog.livedoor.jp/lovehima1/imgs/6/f/6f5371f6.jpg','http://image.blog.livedoor.jp/lovehima1/imgs/b/0/b0cd039d.jpg');
var array_num = Math.floor( Math.random() * bgrounds.length);

var obj = document.getElementsByTagName('div');
for(var i = 0; i < obj.length; i++)

 if(obj[i].className == 'blog-title-outer')
   break;

//--></script>

他の方が試されたようです。
http://knowledge.livedoor.com/40850

BLUEPIXさんのやり方でやればどの仕様もできそうですね。

｛｝を省略してませんか？

for(var i = 0; i < obj.length; i++){
 if(obj[i].className == 'blog-title-outer')break;
 obj[i].style.backgroundImage = "url(" + bgrounds[array_num] +")";
}