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

kawax31 -  
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
    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.
    1. kawax31 Auteur
      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>
    2. Alain_42
      @kawax31Je 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>
    3. kawax31 Auteur
      @Alain_42okmerci..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(){ ..?
    4. Alain_42
      @kawax31si 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.
    5. kawax31 Auteur
      @Alain_42ok..je met tout a lendroit precis dans le body..ça risque pas de creer un problme de chargement de la page.?

Discussions similaires

Clavier bloqué qui n'écrit plus : comment le débloquer
pomad

5 réponses
Clavier bloqué n'écrit plus (memorex 5200)
MURIEL

24 réponses
java script error in the main process
ceciel2307

3 réponses
Clavier bloqué : que faire ?
Benny

215 réponses
je ne peux plus écrire avec mon clavier
pierrot

11 réponses