<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
<!--
function reflect(div, max, intensity, margin, url) {
div.childNodes[0].src = url;
var width = div.childNodes[0].offsetWidth;
var height = div.childNodes[0].offsetHeight;
max = height * max / 100;
intensity /= 100;
div.childNodes[0].style.marginBottom = margin + 'px';
var lines = document.createElement('div');
lines.id = 'lines';
div.appendChild(lines);
for (var i = max; i > 0; i -= 1) {
var line = document.createElement('div');
line.style.width = width + 'px';
line.style.height = '1px';
line.style.backgroundImage = 'url(' + div.childNodes[0].src + ')';
line.style.backgroundPosition = '0px ' + (1 - i + max) + 'px';
if (line.style.opacity != undefined) {
line.style.opacity = i / max * intensity;
} else {
line.style.filter = 'alpha(opacity=' + i / max * 100 * intensity + ')';
}
lines.appendChild(line);
}
}
function clearLines(div) {
if (document.getElementById('lines')) {
div.removeChild(document.getElementById('lines'));
}
}
-->
</script>
<style type="text/css">
body {
background-color:#C0C0C0;
font-family:verdana, arial;
font-size:11px;
color:#333333;
cursor:default;
text-align:center;
}
img {
display:block;
}
p {
margin:3px;
}
form {
margin:0px;
}
input {
border:solid 1px #333333;
padding:3px;
background-color:#C8C8C8;
margin-top:2px;
text-align:center;
}
table {
margin:auto;
border:solid 1px #333333;
background-color:#909090;
}
th {
background-color:#DDDDDD;
padding:3px;
border:solid 1px #333333;
}
tr {
vertical-align:top;
}
td {
padding:3px;
border:solid 1px #333333;
background-color:#A3A3A3;
}
</style>
<title>Reflet</title>
</head>
<body>
<table>
<tr>
<th>Paramètres</th>
<th>Résultat</th>
</tr>
<tr>
<td>
<form method="post" action="javascript:;">
<p>
Hauteur du reflet (en %)<br/>
<input type="text" id="h" value="35"/><br/><br/>
Intensité du reflet (en %)<br/>
<input type="text" id="i" value="60"/><br/><br/>
Marge (en pixels)<br/>
<input type="text" id="m" value="2"/><br/><br/>
URL de l'image<br/>
<input type="text" id="url" value="http://www.javascriptfr.com/g/v9logo/logojs.gif"/><br/><br/>
<input type="submit" value="Afficher" onclick="clearLines(document.getElementById('div')); reflect(document.getElementById('div'), parseInt(document.getElementById('h').value), parseInt(document.getElementById('i').value), parseInt(document.getElementById('m').value), document.getElementById('url').value)"/>
<input type="reset" value="Reset" onclick="clearLines(document.getElementById('div')); document.getElementById('div').childNodes[0].src = 'http://www.javascriptfr.com/g/v9logo/logojs.gif';"/>
</p>
</form>
</td>
<td>
<div id="div"><img src="http://www.javascriptfr.com/g/v9logo/logojs.gif" alt=""/></div>
</td>
</tr>
<tr>
<th colspan="2">Script javascript libre d'utilisation crée par mcc</th>
</tr>
</table>
</body>
</html>