11496 sujets

JavaScript, DOM et API Web HTML5

salut je voulais savoir comment écrire ce genre de truc en js

//je recup la val de ma page
 anchor = window.location.hash;
//je trie et je recup le nom de mon ancre en cours
var anchor = anchor.substring(1,anchor.length); 
if(anchor === realisations){
	 document.write("<img src="image/image3.jpg" alt="Slideshow Image 3" /> ");
}else{"
	 <img src="image/image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image/image2.jpg" alt="Slideshow Image 2" />
    <img src="image/image3.jpg" alt="Slideshow Image 3" /> "
}

En fait c'est pour faire varier un background en fonction de l'ancre en lecture dans un slide de fond
je fais ce truc avec php d'habitude mais si j'utilise php adieux les ancres et adieux le defis
donc si quelq'un pouvais m'aider svp car document
.write c'est zero même en fesant des antislash sur les double quote Smiley confus
bon j'ai tenter ça mais non ça marche po

	var newImage = document.createElement('img');
	newImage.src='image/image1.jpg';
document.getElementById('slides').appendChild(newImage);
salut,
ta question n'est pas très claire. Tu parles de background pour ensuite essayer de mettre des <img>. D'autant qu'une ancre est relative à un ID donc un élément de ton document qui laisse penser à une partie bien distincte de ta page. Elle pourrait contenir chacun un background.
Si ton slide est "factorisé" (et je suppose que c'est le cas), tu dois donc mettre ton code dans une fonction que tu appelleras à chaque fois que l'ancre change (au clic donc).
Tu pourrais définir un tableau littéral où tu associerais à chaque ancre un autre tableau contenant les images à insérer dans ton slide. Tu parcourras par la suite ce tableau selon l'ancre en cours pour insérer tes images dans le slide après avoir effacé son contenu à chaque fois. Cela supposera que ton slide ne contienne que des images (ou alors penser à changer sa structure).
Ça pourrait donner ça

var slide = document.getElementById("slides"),
	backgrounds = {
		"ancre1": ["chemin/image1.jpg"],
		"ancre2": ["chemin/image1.jpg", "chemin/image2.jpg",  "chemin/image3.jpg"],
		"ancre3": ["chemin/image1.jpg", "chemin/image2.jpg"]
	};

function (){
	var anchor = location.hash.substring(1);

	slide.innerHTML = "";
	
	if (backgrounds[ anchor ]) {
		for(var x=0, l=backgrounds [ anchor ].length; x<l; x++){
			var newImage = [];
			
			newImage[x] = document.createElement("img");
			newImage[x].src = backgrounds[ anchor ][x];
			
			slide.appendChild(newImage[x]);
		}
	}
}
Bon je vais re-formuler ma question:
En gros j'ai une page avec des ancre qui sont en quelque sorte sont mes rubrique
ancre un acceuil
ancre deux contact
etc....

j'utilise un effet slide avec mon menu affin de passer d'une rubrique a l'autre en glissant sur la même page en fonction du btn du menu cliquer
jusque la tout marche bien
maintenant je voudrais modifier mon background qui est en fait un slider d'image distribué en js dans mon head et cela en fonction des ancre sur lesquel le navigateur pointe mais sans recharger la page car on perdrais l'effet de glisse entre les rubrique
en gros voici la fonction qui marche mais il faut recharger la page et c'est bien ça la problème

	jQuery(function ($){
				var yop;
anchor = window.location.hash;
var anchor = anchor.substring(1,anchor.length); // enleve le #
 
switch (anchor)
  {
  case "impressions": 
    yop= [	
					
						// Slideshow Images
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
												]
					

    break;
  case "savoir":
    yop= [	
					
						// Slideshow Images
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}
												]
					

    break;
    case "services":
    x="#savoir";

    break;
    case "realisations":
    x="#services";

    break;
   case "contact":
    x="#realisations";
    break;
   case "home":
    x="#home";
    break;
     case "undefined":
    x="#home";
    break;
   case "":
    x="#home";
    break;
  }
  



				
				$.supersized({
					 
					
				
					// Functionality
					slide_interval          :   6000,		// Length between transitions
					transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed		:	5000,		// Speed of transition
															   
					// Components							
					slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
					
					slides 					:  	yop
				});
		    });

c'est un peu long mais y a pas grand chose
Donc comment recharger ma page sans que ça se voie
SVP