変更1つの画像の境界を複数回

Question

私はDrupalの-7ウェブサイトを持っていると私はイメージを持っている：

<img id="blah" src="sites/all/themes/my_theme/test.png" alt="default image" /> 

私が欲しいのはそれに複数のボーダーフレームを追加することで、その後にユーザーに選択肢を与えます彼が好むボーダーを選択し、毎回異なるボーダーでイメージをプレビューします。
これは可能ですか？

Answer 1

あなたはこのような何か意味：

function changeBorder(ele) { 
 
    var classToAdd = ele.value; 
 
    document.getElementById("blah").classList.remove("border1", "border2", "border3", "border4", "border5"); 
 
    document.getElementById("blah").classList.add(classToAdd); 
 
}

.border1{ 
 
    border: 3px coral solid; 
 
} 
 
.border2{ 
 
    border: 4px coral dashed; 
 
} 
 
.border3{ 
 
    border: 5px coral double; 
 
} 
 
.border4{ 
 
    border: 6px coral inset; 
 
} 
 
.border5{ 
 
    border: 7px coral outset; 
 
}

<img id="blah" src="http://placehold.it/150" alt="default image" /><br /> 
 
<button onclick='changeBorder(this)' value='border1'>Border 1</button> 
 
<button onclick='changeBorder(this)' value='border2'>Border 2</button> 
 
<button onclick='changeBorder(this)' value='border3'>Border 3</button> 
 
<button onclick='changeBorder(this)' value='border4'>Border 4</button> 
 
<button onclick='changeBorder(this)' value='border5'>Border 5</button>