Change one image's border multiple times

Question

I have a Drupal-7 website and I have an image:

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

What I want is to add multiple borders-frames at it, and then give the user the option to select which border he prefers, while previewing his image with the different border each time.
Is this possible?

Answer 1

You mean something like this :

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>