Random Selection

<style>
.btn {
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  border: none;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #222222;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #777777;
  text-decoration: none;
}
</style>
<div style="text-align:center">
<svg id="svgRCP2" xmlns="http://www.w3.org/2000/svg" width="250" height="400">
<defs>
<filter id="filterRCP">
<fecolormatrix type="hueRotate">
<animate attributename="values" dur="16s" begin="0s" values="0;360;0" repeatcount="indefinite"/>
</fecolormatrix>
</filter>
</defs>
</svg>
<br/>
<button onclick="myFunction781()" class="btn">Click me !</button>
</div>

<script>
function myFunction781() {
var svgns = "http://www.w3.org/2000/svg";
   var randomString = new Array ();
   var im = Math.floor(Math.random() * 364)+1;

   var image = document.createElementNS(svgns, 'image');
    image.setAttributeNS(null, 'x', 0);
    image.setAttributeNS(null, 'y', 0);
    image.setAttributeNS(null, 'width', 250);
    image.setAttributeNS(null, 'height', 400);
    image.setAttributeNS(null, 'filter', 'url(#filterRCP)');
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http://www.minedition.com/fr/bp/'+im+'.jpg');
    document.getElementById('svgRCP2').appendChild(image);
}
</script>