Script JavaScriptMenu dynamique
Réaliser un menu déroulant dynamique
Ce déroulant Easy-Micro est construit à partir d'une balise html "iframe" qui permet d'intégrer un cadre (un frame qui contiend du Javascript) dans une page web.
<iframe src="news.htm" id="datamain" name="datamain" width="116" height="199" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
La technique html des "iframe" permet de faire apparaitre n'importe quelle page ou site Internet dans un cadre. Pour notre exemple, c'est la page "news.htm" qui apparait.
Voyons maintenant comment faire bouger automatiquement (de bas en haut) le contenu de ce cadre.
C'est ici qu'intervient le JavaScript.
Vous l'avez compris, c'est le contenu du cadre qui bouge.
Le script est donc à installer dans la page news. Celle qui apparait à travers le cadre.
Définition des attributs de la balise iframe :
- "src" (source) indique quel contenu doit apparaitre dans le cadre ("news.htm").
- "id" et "name" permettent de relier le cadre avec son contenu.
- "marginwidth" et "marginheight" définissent la distance entre le cadre et la page.
- "frameborder" indique que le cadre n'a pas de bordure (=0 ou 1).
- "scrolling" indique que ce cadre n'a pas d'ascenceur visible (=no ou yes).
Voici le code de la page news.htm à copier/coller dans le body:
<div id="datacontainer" style="position: absolute; left: 0; top: 10; width: 100%" onmouseover="scrollspeed=0" onmouseout="scrollspeed=cache">
<p align="center">Le texte de vos news...</p><div>
<script type="text/javascript">
//Spécifiez ci-dessous la vitesse du défilement. Plus le chiffre est grand plus ça va vite
var scrollspeed=cache=1;
function initialize() {
marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height")
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top=5
thelength=dataobj.offsetHeight
scrolltest() }
function scrolltest() {
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed
if (parseInt(dataobj.style.top) < thelength*(-1)) { dataobj.style.top=5; }
setTimeout("scrolltest()",50) }
window.onload=initialize;</script></div></div>
<p align="center">Le texte de vos news...</p><div>
<script type="text/javascript">
//Spécifiez ci-dessous la vitesse du défilement. Plus le chiffre est grand plus ça va vite
var scrollspeed=cache=1;
function initialize() {
marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height")
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top=5
thelength=dataobj.offsetHeight
scrolltest() }
function scrolltest() {
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed
if (parseInt(dataobj.style.top) < thelength*(-1)) { dataobj.style.top=5; }
setTimeout("scrolltest()",50) }
window.onload=initialize;</script></div></div>
