Accueil > > > EXPAND BANNER EN JAVASCRIPT
 EXPAND BANNER EN JAVASCRIPT
 Information sur la source
 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
<!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>
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
jouer un son en cliquant sur une image [ par fabiin ]
SalutComment faut-il faire pour jouer un son lors d'un clique sur une image, un lienmerci de votre aide @+Fabs<img src=/imgs2/smile_cool.gif border=0
Navigation dans un formulaire [ par Lolo ]
Est-il possible de naviguer dans les cases d'un formulaire (comme la touche tabulation) avec les flêches du clavier ?
Retrouver la position d'une image [ par Jean Pierre ]
BonjourVoilà, j'ai un script qui me permet de deplacer une image sur l'ecran (drag'n drop). Mon probleme est qu'il faudrait que je puisse avoir la pos
Position des objets [ par Dauphyn ]
Je tente en vain de trouver la position d'une image en JS.Si par exemple j'insère l'image dans un tableau Ex : <html><body><table>&l
Chargement automatique d'une image [ par bumblebee ]
Je cherche a afficher une image l'orsque le client selectionne celle-ci dans dans un champ <input type="file" >Je suppose que cela est faisable
double rollover.... [ par clement ]
Double Rolloverbonjour a tous.voila mon probleme : a l'origine, 2 images( 1 et 2) sur une page.j'aimerai que qd je passe sur l'image 1 il y ait un rol
mesurer image.. a l'aide !!! [ par klaus ]
Heya..pplJe veux avoir les mesures d'une image et j'ai reussi d'avoir quelques scripts, mais le probleme c'est qu'ils ne passent pas sur le Mac. C'est
Envoye d'image par un formulaire [ par brodeur ]
Bonjour, j'ai fait un site ou le visiteur peuvent m'envoyer leurs images.Seulement, je problement, c'est que je ne sais pas comment faire pour que das
position de la souris sur une image [ par golgoth ]
Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr
positionné une image scroll aur netscape4.x [ par rochonpascal ]
Bonjour, depuis une semaine j'essaie de rendre mon site compatible avec netscape 4.x, le problèeme que je rencontre c'est que lorsque j'ai des images
|
Derniers Blogs
 TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURSTECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice
Animé par: Laurent Cotton Le développement dans SharePoint 2010 passe par plusieurs axes qui seront évoqués dans cette session, mais plus particulièrement les développements simples lié au besoin Business Business Connectivity Services Ce BCS es...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|