Ou ecrit on du javascript?entr body? ou head?

kawax31 Messages postés 15 Statut Membre -  
Alain_42 Messages postés 5413 Statut Membre -
Bonjour,
en fait voila j ai un code javascript pour un diaporama automatique , jai ma page index.htm
comment relier les 2 sachant que je voudrais que le diaporama soit a cote de mon logo.et non au dessus?
car en effet j ai essaye de mettre la totalite du code javascript dans la partie head ..mais le diporama est au desus du logo.?
comment faire..?
merci
Configuration: Windows Vista
Internet Explorer 7.0

1 réponse

  1. Alain_42 Messages postés 5413 Statut Membre 904
     
    bonjour,

    il faut distinguer deux choses:

    1- la fonction Javascript
    exemple
    function ma_fonction(){
    instructions .....

    }

    ça tu le mets en principe entre les balises <head> et </head>

    donc:

    <head>
    <script language="javascript" type="text/javascript>
    function ma_fonction(){
    instructions .....

    }
    </script>
    </head>

    2- l'appel de cette fonction javascript depuis ta page

    ex: ma_fonction();

    ça tu le mets à l'endroit ou tu veux que le résultat de ta fonction s'affiche.

    On n'est pas obligé de passer par une fonction, mais ça a l'avantage d'être plus clair et la fonction peut servir plusieurs fois dans la page.
    0
    1. kawax31 Messages postés 15 Statut Membre 1
       
      ok merci..mais voila j ai pas vraiment compris somment placer le code javascript a l endroit exact..j ai ce code javscript..je met quoi dans head et quoi a lendroit precis ou je veux quil saffiche..merci de ton aide

      <!-- DEBUT DU SCRIPT -->
      <!-- Script provenant de http://www.toulouse-renaissance.net/bach-flowers/ -->
      <script language="JavaScript1.2" type="text/javascript">
      /***********************************************
      * Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
      * This notice MUST stay intact for legal use
      * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
      ***********************************************
      PARAMETRES DE REGLAGE
      ***********************************************/
      var slideshow_width='550px' //ENTREZ LA LARGEUR DE L'IMAGE
      var slideshow_height='180px' //ENTREZ LA HAUTEUR DE L'IMAGE
      var pause=3000 //ENTREZ LA PAUSE ENTRE CHAQUE IMAGE (3000=3 seconds)

      var fadeimages=new Array()
      //ENTREZ 1) LE CHEMIN DE L'IMAGE, 2) UN LIEN CLIQUABLE OPTIONNEL SUR L'IMAGE, 3), LE CADRE DE DESTINATION OPTIONNEL :
      fadeimages[0]=["image/villa-individuelle.jpg", "", ""] //SYNTAXE COMPLETE DE L'IMAGE
      fadeimages[1]=["image/fondlogo1.jpg", "https://www.google.com/?gws_rd=ssl", ""] //IMAGE AVEC UN LIEN CLIQUABLE
      fadeimages[2]=["image/piscine4.jpg", "http://www.toulouse-renaissance.net/trucs.htm", "_new"] //IMAGE AVEC UN LIEN CLIQUABLE ET UN CADRE DE DESTINATION
      fadeimages[3]=["image/villa-id.jpg", "http://www.toulouse-renaissance.net/trucs.htm", "_new"] //IMAGE AVEC UN LIEN CLIQUABLE ET UN CADRE DE DESTINATION


      /////NE RIEN EDITER CI-DESSOUS/////////////

      var preloadedimages=new Array()
      for (p=0;p<fadeimages.length;p++){
      preloadedimages[p]=new Image()
      preloadedimages[p].src=fadeimages[p][0]
      }

      var ie4=document.all
      var dom=document.getElementById

      if (ie4||dom)
      document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
      else
      document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

      var curpos=10
      var degree=10
      var curcanvas="canvas0"
      var curimageindex=0
      var nextimageindex=1

      function fadepic(){
      if (curpos<100){
      curpos+=10
      if (tempobj.filters)
      tempobj.filters.alpha.opacity=curpos
      else if (tempobj.style.MozOpacity)
      tempobj.style.MozOpacity=curpos/101
      }
      else{
      clearInterval(dropslide)
      nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
      tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
      tempobj.innerHTML=insertimage(nextimageindex)
      nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
      var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
      tempobj2.style.visibility="hidden"
      setTimeout("rotateimage()",pause)
      }
      }

      function insertimage(i){
      var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
      tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
      tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
      return tempcontainer
      }

      function rotateimage(){
      if (ie4||dom){
      resetit(curcanvas)
      var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
      crossobj.style.zIndex++
      tempobj.style.visibility="visible"
      var temp='setInterval("fadepic()",50)'
      dropslide=eval(temp)
      curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
      }
      else
      document.images.defaultslide.src=fadeimages[curimageindex][0]
      curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
      }

      function resetit(what){
      curpos=10
      var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
      if (crossobj.filters)
      crossobj.filters.alpha.opacity=curpos
      else if (crossobj.style.MozOpacity)
      crossobj.style.MozOpacity=curpos/101
      }

      function startit(){
      var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
      crossobj.innerHTML=insertimage(curimageindex)
      rotateimage()
      }

      if (ie4||dom)
      window.onload=startit
      else
      setInterval("rotateimage()",pause)

      </script>

      <!-- FIN DU SCRIPT -->



      </head>
      0
    2. Alain_42 Messages postés 5413 Statut Membre 904 > kawax31 Messages postés 15 Statut Membre
       
      Je suis allé voir sur le site, il est précisé de mettre le code dans le body

      mais on va faire une fonction que l'on va mettre dans le <head> </head> et que l'on va appeler depuis la page:

      <html>
      <head>
      <!-- DEBUT DU SCRIPT -->
      <!-- Script provenant de http://www.toulouse-renaissance.net/bach-flowers/ -->
      <script language="JavaScript1.2" type="text/javascript">
      function diaporama(){
      
      	/* **********************************************
      	* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
      	* This notice MUST stay intact for legal use
      	* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
      	***********************************************
        	PARAMETRES DE REGLAGE
      	********************************************** */
      	
      	var slideshow_width='550px' //ENTREZ LA LARGEUR DE L'IMAGE
      	var slideshow_height='180px' //ENTREZ LA HAUTEUR DE L'IMAGE
      	var pause=3000 //ENTREZ LA PAUSE ENTRE CHAQUE IMAGE (3000=3 seconds)
      
      	var fadeimages=new Array()
      	//ENTREZ 1) LE CHEMIN DE L'IMAGE, 2) UN LIEN CLIQUABLE OPTIONNEL SUR L'IMAGE, 3), LE CADRE DE DESTINATION OPTIONNEL :
      	fadeimages[0]=["image/villa-individuelle.jpg", "", ""] //SYNTAXE COMPLETE DE L'IMAGE
      	fadeimages[1]=["image/fondlogo1.jpg", "https://www.google.com/?gws_rd=ssl", ""] //IMAGE AVEC UN LIEN CLIQUABLE
      	fadeimages[2]=["image/piscine4.jpg", "http://www.toulouse-renaissance.net/trucs.htm", "_new"] //IMAGE AVEC UN LIEN CLIQUABLE ET UN CADRE DE DESTINATION
      	fadeimages[3]=["image/villa-id.jpg", "http://www.toulouse-renaissance.net/trucs.htm", "_new"] //IMAGE AVEC UN LIEN CLIQUABLE ET UN CADRE DE DESTINATION
      
      
      	/////NE RIEN EDITER CI-DESSOUS/////////////
      
      	var preloadedimages=new Array()
      	for (p=0;p<fadeimages.length;p++){
      	preloadedimages[p]=new Image()
      	preloadedimages[p].src=fadeimages[p][0]
      	}
      
      	var ie4=document.all
      	var dom=document.getElementById
      
      	if (ie4||dom)
      	document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overfl­ow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;­left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;­left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
      	else
      	document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')
      
      	var curpos=10
      	var degree=10
      	var curcanvas="canvas0"
      	var curimageindex=0
      	var nextimageindex=1
      
      	function fadepic(){
      	if (curpos<100){
      	curpos+=10
      	if (tempobj.filters)
      	tempobj.filters.alpha.opacity=curpos
      	else if (tempobj.style.MozOpacity)
      	tempobj.style.MozOpacity=curpos/101
      	}
      	else{
      	clearInterval(dropslide)
      	nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
      	tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
      	tempobj.innerHTML=insertimage(nextimageindex)
      	nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
      	var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
      	tempobj2.style.visibility="hidden"
      	setTimeout("rotateimage()",pause)
      	}
      	}
      
      	function insertimage(i){
      	var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
      	tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
      	tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
      	return tempcontainer
      	}
      
      	function rotateimage(){
      	if (ie4||dom){
      	resetit(curcanvas)
      	var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
      	crossobj.style.zIndex++
      	tempobj.style.visibility="visible"
      	var temp='setInterval("fadepic()",50)'
      	dropslide=eval(temp)
      	curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
      	}
      	else
      	document.images.defaultslide.src=fadeimages[curimageindex][0]
      	curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
      	}
      
      	function resetit(what){
      	curpos=10
      	var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
      	if (crossobj.filters)
      	crossobj.filters.alpha.opacity=curpos
      	else if (crossobj.style.MozOpacity)
      	crossobj.style.MozOpacity=curpos/101
      	}
      
      	function startit(){
      	var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
      	crossobj.innerHTML=insertimage(curimageindex)
      	rotateimage()
      	}
      
      	if (ie4||dom)
      	window.onload=startit
      	else
      	setInterval("rotateimage()",pause)
      
                //fin de la fonction diaporama
      } 
      	</script>
      
      	
      
      <!-- FIN DU SCRIPT --> 
      
      <head>
      <body>
          diaporama();
      </body>
      </html>
      
      0
    3. kawax31 Messages postés 15 Statut Membre 1 > Alain_42 Messages postés 5413 Statut Membre
       
      okmerci..je commence à piger..le code javascript correspond a une fonction ,ds ce cas un diaporama...
      j inscris " diaporama();" à l endroit ou je veux que le diaporama s affiche dans mon page html entre les <body< ,bien sur!

      je viens dessayer mais ca fonctionne pas..faut il pas refermer quelque part..diaporama{
      <script language="JavaScript1.2" type="text/javascript">
      function diaporama(){ ..?
      0
    4. Alain_42 Messages postés 5413 Statut Membre 904 > kawax31 Messages postés 15 Statut Membre
       
      si mon copier collé a bien marché, normalement la fermeture } de la fonction diaporama est présente juste avant </script>

      sinon si ça marche pas tu n'est pas obligé d'utiliser le principe de la fonction, tu mets tout le paquet que tu as pris sur le site dans le body à l'endroit ou tu veux que ça affiche le diaporama.
      0
    5. kawax31 Messages postés 15 Statut Membre 1 > Alain_42 Messages postés 5413 Statut Membre
       
      ok..je met tout a lendroit precis dans le body..ça risque pas de creer un problme de chargement de la page.?
      0