|
|
|
|
Bonjour,
Je voudrais mettre de la pub sur mon site, et j'aimerais qu'une des ces publicités puissent "glisser". Je m'explique.
Ce que je voudrais, c'est que lorsque le visiteur est sur la page, la publicité "sort" des barres d'outils plus haut... Je ne sais pas si vous comprenez...
Savez-vous comment faire?
Merci à l'avance de vos réponses!
Alexandre Poulin
"Un homme sans vision est un homme mort"Configuration: Windows Vista
Firefox 3.5.4
Voilà un exemple bidon mais tu pourras t'en servir :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans nom</title> <style type="text/css"> body { margin: 0; padding: 0; } #a1 { height: 20px; background-color: black; } #a2 { background-color: #a3a3a3; width: 100%; position:absolute; display: none; } #a2 * { margin: 0; padding:0; } #a3 { height: 800px; background-color: #aa9090; } </style> <script type="text/javascript"> <!-- function depli(idConteneur,PxInterval,MSInterval) { var cont = document.getElementById(idConteneur); if(cont.style.display != 'block') { cont.style.overflow = 'hidden'; cont.style.display = 'block'; var height = cont.offsetHeight; cont.taille = height; cont.style.height = '0px'; var newHeight; var inter = setInterval(function () { newHeight = cont.offsetHeight + PxInterval; if(newHeight > height) PxInterval = height - cont.offsetHeight; cont.style.height = cont.offsetHeight + PxInterval+'px'; if(newHeight == height) clearInterval(inter); },MSInterval); return; } var newHeight; var height = cont.offsetHeight; if(cont.taille != height) return; var inter = setInterval(function () { newHeight = cont.offsetHeight - PxInterval; if(newHeight < 0) PxInterval = cont.offsetHeight; cont.style.height = cont.offsetHeight - PxInterval+'px'; if(newHeight == 0) { cont.style.display = 'none'; cont.style.height = height+'px'; clearInterval(inter); } },MSInterval); return; } //--> </script> </head> <body> <div id="a1"></div> <div id="a2"><p>là tu mets ce que tu veux !</p></div> <div id="a3" onclick="depli('a2',5,10);"></div> </body> </html> il faut cliquer sur le cadre gris rose pour que ca s'affiche. si tu veux que tout descende tu supprimes position absolute sur a2 |
Merci, mais serait-il possible de seulement mettre une image et non de descendre tout la largeur de la page? Serait-il possible de la faire descendre plus tranquillement et sans que le visiteur ait besoin de cliquer? Serait-il possible de mettre un petit X, et que lorsque le visiteur cliquerait dessus, la barre rentrerait?
|
Tu mets ce que tu veux de la taille que tu veux
<img src="monimage" id="im" />
<a href="javascript: depli('im',10,40);">déplie</a>
<a href="javascript: depli('im',10,40);">replier</a>
tu places les liens où tu veux si dans le css tu mets position: absolute; elle passera au premier plan en ce dépliant si tu ne le met pas elle restera sur le plan normal et poussera le reste vers le bas... ensuite tu lui donne le nombre de pixel par intervalle et la durée entre chaque intervalle la fonction ce charge du reste.... |