Expand banner en javascript

1/5 (4 avis)

Vue 7 909 fois - Téléchargée 982 fois

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>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014
9 mai 2009 à 13:47
salut, ça clignote au survole d'un éléments enfant du conteneur...
c'est dut au mouseover, (et mouseout) , qui se déclenche a chaque fois que l'on se positionne sur un enfant de l'élément observé....
Sur ie ce problème se résolve avec un mouseleave , pour les autre faux récupérer l'élément d'éclancheur de l'évenement, et testé si c'est un enfant ou pas ....
Sinon sympa , le code est claire , mais c'est vrai que il aurait été aisé de le rende un peu plus générique ...
a++
lakichemole Messages postés 253 Date d'inscription vendredi 13 juin 2003 Statut Membre Dernière intervention 18 mai 2009
6 mai 2009 à 14:34
Ok Domage
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 3
6 mai 2009 à 11:05
slt,

à chacun d'adapter à son besoin, ce sont juste des exemples de ce qu'on peut faire.

L.
lakichemole Messages postés 253 Date d'inscription vendredi 13 juin 2003 Statut Membre Dernière intervention 18 mai 2009
6 mai 2009 à 10:38
La source marche nikel (testé sous FF et IE6) par contre c'est dommage que le code soit si peut réutilisable :) J'entend par là qu'il y a beaucoup de données en dure dans ton code, des fonctions un peu plus générique serait un + :)

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.