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

kawax31 Messages postés 15 Date d'inscription   Statut Membre Dernière intervention   -  
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   -
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

1 réponse

Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
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
kawax31 Messages postés 15 Date d'inscription   Statut Membre Dernière intervention   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
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894 > kawax31 Messages postés 15 Date d'inscription   Statut Membre Dernière intervention  
 
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
kawax31 Messages postés 15 Date d'inscription   Statut Membre Dernière intervention   1 > Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention  
 
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
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894 > kawax31 Messages postés 15 Date d'inscription   Statut Membre Dernière intervention  
 
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
kawax31 Messages postés 15 Date d'inscription   Statut Membre Dernière intervention   1 > Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention  
 
ok..je met tout a lendroit precis dans le body..ça risque pas de creer un problme de chargement de la page.?
0