1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Création d'une vignette</title>
<style>
#conteneur,
#miniature{
box-sizing:border-box;
float: left;
text-align: center;
width: 50%;
}
#conteneur > div,
#miniature > div{
border:1px solid #CCC;
padding:1em;
}
textarea{
resize:none;
height:5em;
width:20em;
}
#miniature > div{
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
</style>
</head>
<body>
<p><button>Ajout miniature</button></p>
<div id="conteneur">
<div>
<h1>Titre conteneur</h1>
<p><img src="http://www.developpez.net/template/images/logo.png" alt="logo DVP"></p>
<p><textarea>Bonjour</textarea></p>
</div>
</div>
<div id="miniature">
</div>
<script>
var oBtn = document.getElementsByTagName('BUTTON')[0];
oBtn.onclick = function(){
var oSrc = document.getElementById('conteneur'),
oDest = document.getElementById('miniature'),
oClone = oSrc.querySelectorAll('DIV')[0].cloneNode( true);
oDest.appendChild( oClone);
}
</script>
</body>
</html> |
Partager