Expand banner en javascript

Soyez le premier à donner votre avis sur cette source.

Vue 7 562 fois - Téléchargée 919 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

lakichemole
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009
-
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 + :)
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1 -
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
-
Ok Domage
cs_Kimjoa
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
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++

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.