Créer un reflet d'une image

Télécharger le projet
Commenter

Description

Ce petit script permet de créer un reflet sous n'importe quelle image.
Le principe est assez simple, pour 'renverser' l'image il faut créer autant de div que nécessaire de 1px de haut et d'image de fond celle dont on veut faire le reflet. Ensuite l'astuce c'est de placer l'image de fond dans le div (avec background-position) de façon à renverser l'image.
Si vous voulez tester tout de suite allez ici : http://sd-1.archive-host.com/membres/up/70845355/ (l'image d'exemple est le logo de javascriptfr.com ;))
Par contre il peut avoir des petits problèmes d'affichage si vous passez d'une grande image à une petite (les dimensions ne sont pas mises à jour) dans ce cas il suffit de recliquer sur 'Afficher'.
Cet exemple a été testé sous Firefox 3, IE 7, Safari 3 et Opera 9. (sous IE 8 il y a un problème de transparence, mais en même temps cette version a encore pas mal de chemin en ce qui concerne le support du javascript d'après ce que j'ai pu voir...)

Source / Exemple : 


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

Conclusion :


Un petit script simple et assez rapide pour créer des reflets sous ses images !
PS : j'ai cherché sur le site une ou des sources(s) équivalente(s) mais je n'en n'ai pas trouvé, alors si elle(s) existe(nt) déjà, désolé.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (macsou01)