<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>
