2つのdivカップルをクリックすると表示されます

Question

のように、exampleのように2つのJavascriptコードをクリックすると、ウェブ上でいくつかのJavascriptコードが表示されます。

今、私はどのようにdivsを使って同じ結果を達成するのだろうと思っています。

小さい画像と大きい画像の両方が、境界を形成する別のdivの内側にあるdivの背景画像になります（画像の内側の境界の半径を設定できるようにする必要があります。内側のdivを使用して境界線の半径を設定するとできます）。だから私は持っている：

<div class="bordersmallpicture"><div class="smallpicture"></div></div> 

と

<div class="borderlargepicture"><div class="largepicture"></div></div> 

をどのように私はこれら二つのdivのカップルの代わりに、画像を切り替えるには、Javascriptを伝えることができますか？ここで私はイメージが見つかりJavascriptのコードは次のとおりです。

<script> 
var imageURL = "small-picture.png"; 

if (document.images) { 
var smallpicture = new Image(); 
smallpicture.src = "small-picture.png"; 

var largepicture = new Image(); 
largepicture.src = "large-picture.png"; 
} 

function changeImage() { 
if (document.images) { 
    if (imageURL == "large-picture.png") {imageURL = "small-picture.png";} 
    else {imageURL = "large-picture.png";} 

    document.myimage.src = imageURL; 
} 
} 
</script> 

とHTML部分：

<a href="#" onclick="changeImage();"><img src="small-picture.png" name="myimage" title="Click to resize" alt="tree"></a> 

は、誰も私に上記のdivのカップルを切り替えるには、このコードを編集する方法のヒントを与えることができます？ divを扱う際には全く新しいコードが必要でしょうか？

Answer 1

クラスを切り替えるだけで済みます。クラスでのCSSの背景としてあなたのイメージを使用してrunning exampleを参照してください：

<div id="border-div" class="bordersmallpicture"> 
    <div id="image-div" class="smallpicture"></div> 
</div> 

Javascriptが次のようになります。

<script> 
function changeImage() { 
    var currentClass = document.getElementById('border-div').className; 
    if(currentClass == 'borderlargepicture') { 
    document.getElementById('border-div').className = 'bordersmallpicture'; 
    document.getElementById('image-div').className = 'smallpicture'; 
    } else { 
    document.getElementById('border-div').className = 'borderlargepicture'; 
    document.getElementById('image-div').className = 'largepicture'; 
    } 
} 
</script> 

あなたはjavascriptのをたくさん使用して予想される場合は、私はコードを容易に思われるのjQueryを使用することをお勧めします：

<script> 
function changeImage() { 
$('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture'); 
$('#image-div').toggleClass('smallpicture').toggleClass('largepicture'); 
} 
</script> 

toggleClassする

（ここ exampleである）クラスをON/OFFオン