Expand banner en javascript

Télécharger le projet
Commenter

Description

Une banniere qui s'agrandit au survol du pointeur.(comme une animation flash)
tout en javascript,une image qui s'agrandit, une autre qui s'agrandit et se deplace, texte qui s'agrandit (changement de class).

Source / Exemple : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Div_mobile</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
	body
	{
	text-align: center;
	background-color: steelblue;
	margin: 0px;
	}
	#cont
	{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	top: 20px;
	width: 800px;
	height: 350px;
	background-color: lightslategray;
	border:1px solid blue;
	padding: 0px;
	}
	#maBan{
	overflow: hidden;
	width:800px;
	height:120px;
	border:1px solid;
	position:absolute;
	top:0px;
	left: 0px;
	background-color: skyblue;
	text-align: center;
	z-index: 20;
	}
	#mima
	{
	position: relative;
	top: 10px;
	width: 400px;
	height: auto;
	}
	#gim
	{
	position: absolute;
	top: 180px;
	left: 100px;
	width: 80px;
	height: auto;
	}
	#txto
	{
	position: absolute;
	left: 10px;
	top: 280px;
	}
	.first
	{
	font-family: Almonte Snow;
	font-size: 14px;
	}
	.two
	{
	font-family: Almonte Snow;
	font-size: 30px;
	}
	</style>
</head>
<body onload="initMenu();">
<!--


                                •  pour infos**********************

l'image #mima fait 100px de haut , #gim = 38px;


                                                                                                  •   -->

<script type="text/javascript">
var t1 = null;
var t2 = null;
var farc = 0;
function moveDown()
{
	clearTimeout(document.getElementById('maBan').t2);
	var obj = document.getElementById('maBan').style;	
	var zob = document.getElementById('mima').style;
	var pouf = document.getElementById('gim').style;
	var leris = document.getElementById('txto');
	if ( parseInt(obj.height)<120+'px')obj.height = 120 +'px';
	if ( parseInt(obj.height) <= 346 && parseInt(obj.height) >= 120 )
	{
		obj.height = parseInt(obj.height)+4+'px';
		zob.width = parseInt(zob.width)+4+'px';
		pouf.width = parseInt(pouf.width)+3+'px';
		pouf.left = parseInt(pouf.left)+6+'px';
		document.getElementById('maBan').t1 = setTimeout(function(){moveDown();}, 5)
	}
	else {clearTimeout(document.getElementById('maBan').t1);
	leris.className = 'two';
	document.getElementById('mima').src = '13A.jpg';
	obj.background = 'darkgray';
	}
}
 
function moveUp()
{	
	clearTimeout(document.getElementById('maBan').t1);
	var obj = document.getElementById('maBan').style;	
	var zob = document.getElementById('mima').style;
	var pouf = document.getElementById('gim').style;
	var leris = document.getElementById('txto');
	if ( parseInt(obj.height) > 124 && parseInt(obj.height)<= 350 )
	{
		obj.height = parseInt(obj.height)-8+'px';
		zob.width = parseInt(zob.width)-8+'px';
		pouf.width = parseInt(pouf.width)-6+'px';
		pouf.left = parseInt(pouf.left)-12+'px';
		document.getElementById('maBan').t2 = setTimeout(function(){moveUp();}, 2)
	}
	else {
	clearTimeout(document.getElementById('maBan').t2);
	leris.className = 'first';
	document.getElementById('mima').src = 'ban.jpg';
	obj.background = 'skyblue';
	}
}

// ----------------------
// Initialise les objets
// ----------------------
 
function initMenu() {
  document.getElementById('cont').style.top = '10px' ;
  document.getElementById('maBan').style.height = '120px' ;
  document.getElementById('mima').style.width = '400px' ;
  document.getElementById('gim').style.width = '172px' ;
  document.getElementById('gim').style.left = '100px' ;
}
</script>
<div id="cont">
<div id="maBan" onmouseover="moveDown();" onmouseout="moveUp();"><img src="ban.jpg" id="mima">
<img src="slt.gif" id="gim">
<p id="txto" class="first">Ceci est une banniere redimensionnèe au survol du pointeur de la souris !</p>
</div>
<div style="position:absolute; width: 100px; left: 350; bottom:10px;"><img src="kim.gif"></div>
</div>
</body>
</html>
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 (cs_leris)