<html lang="fr">
<head>
<meta charset="utf-8">
<title>The Dark Tower</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow-x:hidden;
}
#svg1{
width:100%;
height:6000px;
}
#title{
font-family:sans-serif;
font-size:20px;
fill:white;
}
#div1{
font-family:sans-serif;
font-size:20px;
color:#fff;
position:fixed;
top:10;
right:10;
}
</style>
</head>
<body>
<svg id="svg1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="black" />
<stop offset="25%" stop-color="darkblue" />
<stop offset="75%" stop-color="royalblue" />
<stop offset="100%" stop-color="lightblue" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="green" />
<stop offset="2%" stop-color="saddlebrown" />
<stop offset="90%" stop-color="black"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
<pattern id="pat1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrI5TySUtyjBIxOuyk-yYEKtML3euVqIDQg16-0GsqPuYokT0YnktXJgVM1UF5NYyLIYM7-9zb-7_dqY-NOnX3mhBNpMTSP9yIJTp3fdi4fV0nlA7r84XjTCkNqj7-QY8TzMSoVcvg3A/s1600/stones.png" x="0" y="0" width="100" height="100"></image>
</pattern>
</defs>
<rect width="100%" height="50%" fill="url(#grad1)"/>
<rect y="50%" width="100%" height="50%" fill="url(#grad2)"/>
<text x="10" y="30" id="title">The Dark Tower</text>
<g id="gf" transform="translate(0 0)">
<rect x="0" y="2700" width="400" height="300" fill="url(#pat1)" stroke-width="2" stroke="black" rx="20" ry="20"/>
<rect x="20" y="2720" width="360" height="260" fill="black" rx="20" ry="20" opacity="0.9"/>
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4rK8cYKmZTZJLK-8r_2VPSxE6p1pkLYwQ_UKcI2wazcVleEvg5SEAvsN_UOxfdIzSV-GNOOyv3ZRz6SoMFeyDWMxHusrRiX_58UmeFy7NzwBYaQu4cUDP59tAkS1PjBan0N8jMKI_HQ/s1600/gob1.gif" width="200" height="200" x="100" y="2780" id="gob1"/>
</g>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gf" transform="translate(0 -300)" id="1f" opacity="0"/>
</svg>
<div id="div1"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var mx,my;
var i=0;
var gob1=document.getElementById("gob1");
var div1=document.getElementById("div1");
var gf=document.getElementById("gf");
gf.setAttribute("transform","translate("+((ww/2)-200)+" 0)");
function mouseClick(e){
mx=e.clientX;
my=e.clientY;
div1.innerHTML=mx+" "+my;
if(i==1){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzKBzDlW1BaLA5TdNtrmqcYbALbmxjamZ-pYT0RNQGtzftAFNFEdKRIPXmUSAO5ymCaw8AxH7p7i589uSJiompyIS15zNTXOx4YSiCNEJdiMQXxQSKv_OQZQsP1ScBEeHEJJZTCZBKg/s1600/gob3.gif");i++}
if(i==0){gob1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9mNT3P4H5z5HPLKPSNfP288qwcwMVSoLT1BbRQWal6JIrl5p_IaRrkTf5vwfo3D0qX4_cgce4RiFZTRWjnlzfjX6P9-ogDG_MUoXPLJwAKa6zfjRPHjVdZcqyCrls3fnSTEtyVS-Ng/s1600/gob2.gif");i++}
}
gob1.onclick=mouseClick;
</script>
</body>
</html>
