クリック時に変化するスケーラブルな背景画像

Question

私はちょっと、this threadという拡張子の質問があります。

私は自分の背景イメージを使用しています。しかし、それらを自動的にタイルにするのではなく、私はそれらをブラウザに合わせてリンクしたいと思います。私はCSSを使ってスケーラブルな背景イメージを作成する方法を知っていますが、上記のCSSをスクリプト内のbackImage変数にリンクする方法はわかりません（下の、または前のスレッドからのジャンプ後に利用できます）様々な画像。

<script type="text/javascript"> 

var backImage = [ 
    "images/street.png", 
    "images/market.jpg", 
    "images/building.jpg", 
    "images/skyscraper.jpg", 
    "images/gasstation.jpg", 
    "images/trees.jpg" 
]; 

function changeBGImage(whichImage) { 
    if (document.body){ 
     document.body.style.backgroundImage = 'url('+backImage[whichImage]+')'; 
    } 
}; 
</script> 

トリッキーな部分は、複数のとHTML内の既存のdivに... ...私はすでにこれを適用していますので、私はHTMLにクラスを適用することはできません

<a href="javascript:changeBGImage(1)">Change</a> 

です他のクラス。したがって私はbackImageまたはjavascriptの特定のpngとjpgにクラスを追加する必要があります。

ありがとうございます！

Answer 1

友人が私の問題を解決するのを手伝ってくれました。ここに行く：

<script type="text/javascript"> 

var backImage = [ 
    "images/vintagemap.png", 
    "images/earbuds.jpg", 
    "images/flames.jpg", 
    "images/grass.jpg", 
    "images/library.jpg", 
    "images/shapes.jpg" 
]; 

function changeBGImage(whichImage) { 
    if (document.body){ 
     document.body.style.backgroundImage = 'url('+backImage[whichImage]+')'; 
     document.body.className = 'bgchange'; 
    } 
}; 

</script> 

"document.body.className = 'bgchange';"という行が追加されました。私の元のJSの下に、次のCSSクラスを書いた：

.bgchange { 
    background-repeat:no-repeat; 
    background-size:cover; 
} 

それは今スケーラブルな、フルスクリーンの背景画像に任意の写真のサイズを変更します。

他の誰かがこの情報を役立ててくれることを願っています。

Answer 2

あなたchangeBGImage()機能の一部として、あなたはそれが変わると各背景画像に、あなたが好きなものは何でもするdocument.bodyに追加.style.の変更を行うことができます。

EDIT：

基本的に、この取る：

function changeBGImage(whichImage) { 
    if (document.body){ 
     document.body.style.backgroundImage = 'url('+backImage[whichImage]+')'; 
    } 
}; 

をそして、これにそれを回す：あなたは身体にbackground-size以外のいくつかのCSSを設定したい場合は

function changeBGImage(whichImage) { 
    if (document.body){ 
     document.body.style.backgroundImage = 'url('+backImage[whichImage]+')'; 
     document.body.style.backgroundSize = '###px'; 
    } 
}; 

あるいは、要素の代わりに.style.パラメータの後にそれを行います。 CSSをJSに変換すると、ハイフンが削除され、次の文字が大文字になります（CSSのbackground-imageはJS内でbackgroundImageになります）