mardi 27 février 2018
Face & fond
<svg height="400" id="svgFace3" onclick="myFunction17();" width="400"></svg>
<script>
function myFunction17() {
var randomString0 = new Array ();
randomString0[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3inWs9Dt5fCc5AS2B_u38rqImkIN9efTe7m9KsPUj7lmEYrfOYcwTd_BuT4OyI7r0ZCAFIGcnhN1m72kOrSIZGEYWoguRxidJD6s5_L9ftL4nmln5tGmkw34M6yuYfOz3WbuqyA79A/s1600/pa1.jpg";
randomString0[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVP6pJVyKAvTXtALeusGYo7sWBZgHt-XNx4ljEfnaeadhnHJG91f4h0E36EZP-9lZmGljCB8l_Z8HrZ-7WYbSUfyczSTcbePQsWJlstaBHnhqE4YMflTePWjkAeIybpPGOPQi9SADKwg/s1600/pa2.jpg";
randomString0[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOqR_gvnqz7pZxcraTmdYvl4gZxzDo6J04PRCeM3O8Je6krea50T2YZZ2exffMyNqwv0gvDboixirH4aEgtf2WMW4c_DgwU9lzJC9QBWbFQe58kPVTwygvTBF7Y13jaFW6_SipLJ2Ugw/s1600/pa3.jpg";
randomString0[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIUq2a5VTX9Thr78YOREOMxUiTdp5fHJGF36at9Yuh5WKv9n7g8O1ybgl8qdLbhDY04iqnOHrh9qjVjK8Ky5aNWeCOUm5NcTVgGJ_U7RG1dxHgZbXRxpz0AN9Tt0kW31nc5X0ZmW_cKg/s1600/pa4.jpg";
var fond = Math.floor(4*Math.random());
var image0 = document.createElementNS(svgFace3.namespaceURI, 'image');
image0.setAttributeNS(null, 'x', 0);
image0.setAttributeNS(null, 'y', 0);
image0.setAttributeNS(null, 'width', 300);
image0.setAttributeNS(null, 'height', 400);
image0.setAttributeNS('http://www.w3.org/1999/xlink', 'href', randomString0[fond]);
var randomString1 = new Array ();
randomString1[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcR1Qf4s6DwuatDBMx2fxiqJwx2FjDHniQeUYQDC1-AtjkOAHDE5neaG08hR8Ra9HH9paOHA7Fhd0yMJTPLUAUT7aT4I9Vr_DYZ0LQP05QMbHvDuttG_SAMAh8QW640PWqLEDIBJlYwA/s1600/fe1.png";
randomString1[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrFmlOAl6cF2-86tNMieVvJbffeILezT104QyYps8sIm4ks3kmSwCPPuQAp4KwsWSFEzoqSyM4C37f2RQU0HI2ndGCw31kRCl4It5qvabsZyi5u2bnqNVu2nRG0C48g1CanKHYQLTn1Q/s1600/fe2.png";
randomString1[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aPVlwngmOSxGqfGfCmcoEWs4TlXLFHDskzvAvW1s17Afgc3kxwJbW7ALVfZWLv5bi4sPAB2R7L23RIvYUEXhmuHeEDcVDzr3vDZR9OxZdHBIrzmuQcP6ZAY1xOANdl7InNSQyWyz_A/s1600/fe3.png";
randomString1[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFB49iObJfr3_fIIVSDjwuWBfuVRg-7m3-WI9XtKZcdlDBkkh5Q9hC7j-wcPMtdDQrWI-hGG51AsYMz7bDoM95R1aBkTLwLrNDQugBfsIhlFfPJOa1aLAvn9hPC84D41vXaHhybTntw/s1600/fe4.png";
var face = Math.floor(4*Math.random());
var image1 = document.createElementNS(svgFace3.namespaceURI, 'image');
image1.setAttributeNS(null, 'x', 0);
image1.setAttributeNS(null, 'y', 0);
image1.setAttributeNS(null, 'width', 300);
image1.setAttributeNS(null, 'height', 400);
image1.setAttributeNS('http://www.w3.org/1999/xlink', 'href', randomString1[face]);
svgFace3.appendChild(image0);
svgFace3.appendChild(image1);
}
myFunction17();
</script>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate