Sujet Précédent Sujet Suivant

Je recherche un code en java script

Fermé
localhost Messages postés 2 Date d'inscription dimanche 14 décembre 2008 Statut Membre Dernière intervention 10 février 2009 - 15 déc. 2008 à 19:46
 localhost - 16 déc. 2008 à 08:57
Bonjour,
j'ai créeé une page html dans laquelle jevoudrais insérer des photo et du texte dans une div différentes
par exemple il y aurais trois paires de chaussures ou autres objets j'aurais un lien texte et image et je vous en cliquant afficher l'image de l!objet ici un jpg dans une div et du texte dans un autre div sachant que le titre du texte est en h2 et le texte en h3 ,en cliquant sur un autre lien la photo serais remplacer par l'autre articles et bien le texte correspondnt à l'objet.... je ne peus le faire en php ,car la personne avec laquel je bosse ne veus pas de php,et en html reviendrais a créer une nouvelle page a chaque objet il me reste le java script et là je sèche grave
A voir également:

2 réponses

Réponse 1 / 2
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
15 déc. 2008 à 20:36
Salut, pourquoi ne pas utiliser de php ? c'est beaucoup plus simple. Mais voila une solution en javascript : 

<html>
	<head>
		<script type="text/javascript">
			function affiche_produit(ouca)
			{
				document.getElementById('affichage_image').innerHTML = document.getElementById('image_'+ouca).innerHTML; // On remplace le contenu du div  affichage_image par celui qui contient  la bonne image
				document.getElementById('affichage_texte').innerHTML = document.getElementById('text_'+ouca).innerHTML;// On remplace le contenu du div  affichage_texte par celui qui contient  le bon texte
			}
		</script>
		<style type="text/css">
			.mask
			{
				display:none; <!-- On masque les div qui contiennent les infos -->
			}
		</style>
	</head>
	<body onload="affiche_produit(1)">
		<div id="affichage_image"></div><div id="affichage_texte"></div>
		<div id="image_1" class="mask"><img src="https://www.homedepot.ca/wcsstore/HomeDepotCanada/images/catalog/970963A_4.jpg"/></div>
		<div id="text_1" class="mask">blablablabla1</div>
		
		<div id="image_2" class="mask"><img src="http://imagesforum.doctissimo.fr/mesimages/4021237/drole%203.jpg"/></div>
		<div id="text_2" class="mask">blablablabla2</div>
		
		<div id="image_3" class="mask"><img src="http://billounette.b.i.pic.centerblog.net/17tzfjeo.jpg"/></div>
		<div id="text_3" class="mask">blablablabla3</div>
		
		<a href="#" onclick="affiche_produit(1); return false;">Afficher 1</a>
		<a href="#" onclick="affiche_produit(2); return false;">Afficher 2</a>
		<a href="#" onclick="affiche_produit(3); return false;">Afficher 3</a>
	</body>
</html>


Ça fonctionne sous Firefox3 et ie7, pas testé sous safari ou autre mais je pense qu'il est compatible, le javascript utilisé est pas très compliqué.
0
Réponse 2 / 2
localhost
16 déc. 2008 à 08:57
merci beaucoup je vais essayer ça
0