Texte qui apparait après clic sur une image

Sujet résolu

25 janvier 2009 à 11:50:56

Bonjour à tous,

Voila j'ai besoin d'un peu d'aide pour apprendre à réaliser un script qui me permettrait de faire apparaitre du texte sur ma page dès que l'internaute clique sur une photo.

Ma page serait en fait divisée en 2 blocs div : une qui contiendrait des photo et un qui contiendrait le texte.

L'idée est donc que lorsqu'on clique sur une des photos, le texte apparait puis si on clique sur une autre photo, un nouveau texte apparait et ceci sans avoir besoin de créer des pages.

Voilà j attend vos conseils et suggestions

Merci d'avance
Bon dimanche à tous

xavierm02

25 janvier 2009 à 12:18:30

<div>
<img src="imageblablabla.jpg" name="imageavecdescription" id="image1"/><img src="imageblablabla2.jpg" name="imageavecdescription" id="image2"/>
</div>
<div>
  <span id="paragrapheimage1" name="descriptionpourimage">ceci est l'image 1</span>
  <span id="paragrapheimage2" name="descriptionpourimage">ceci est l'image 2</span>
</div>

function lesparagraphesspourlesimages()
{
images=document.getElementsByName('imageavecdescription');
for(var i=0;i<images.length;i++)
{
this=images[i];//je sais que ça seret sans doute à rien mais j'ai jamais trop compris les onclick donc dans le doute...
images[i].onclick=afficherdescription(this.id);//je sais, il y a mieux..
}
descriptions=document.getElementsByName('descriptionpourimage');
for(var i=0;i<descriptions.length;i++)
{
descriptions[i].style.display='none';
}
}
var paragraphe;
function afficherdescription(id)
{
paragraphe.style.display='none';
paragraphe=document.getElementById('paragraphe'+id);
paragraphe.style.display='inline';
}

j'ai aps testé... mais en gros si ça arche, tu mets image1 pour l'image et paragrapheimage1 pour la description comme id et ça se fait tout seul...
si ça marche pas, il va faloir que j'y reregarde et j'ai la flem

tony7000

25 janvier 2009 à 14:41:24

merci xavier, malheureusement ça n a pas fonctionné chez moi

Il n'y a aucune possibilité de cliquer sur les images et les 2 textes s'affichent directement :euh:

xavierm02

25 janvier 2009 à 17:14:40

c'est normal que les 2 s'affichent directement...
comme ça un boulet qui n'as pas de javascript les voit... et un qui as le javascript voit que celle qu'il veut voire...
là je fais autre chose et dès que j'ai fini je regarde de plus près (mon code a été fait à l'arrache)...

tony7000

25 janvier 2009 à 19:06:38

ok merci xavier !
si en attendant, qqun veut proposer aussi sa petite idée il est le bienvenu, + on est de fous , .. :lol:

Elias le Vert

25 janvier 2009 à 19:25:24

Tu peux regarder le fonctionnement d'une fonction que j'avais posté sur un autre sujet, qui consistant justement à cliquer sur des liens différents pour faire apparaitre un texte différent : http://www.siteduzero.com/forum-83-362 [...] html#r3355905

tony7000

25 janvier 2009 à 20:08:19

Merci bcp Elias, malheureusement je n arrive pas non plus au résultat voulu :euh:

petite question bête mais est ce que je dois bien mettre le code javascript entre les balises <head></head> ? J'ai donc mis ton code ci-dessous entre ces balises. Au résultat, on a donc bien le texte du premier bloc div qui s affiche mais on arrive pas à cliquer sur les images (j ai essayé aussi avec des liens texte mais c pareil)

<script Language="javascript">
var list_div = new Array('page1', 'page2');

//Au chargement de la page, on ne laisse affichée que la première div
window.onload = function(){
for(var i=1; i<list_div.length; i++){ //On commence la boucle à 1 pour ne pas modifier la première div de la liste
var div = document.getElementById(list_div[i]);
div.style.display = 'none';
}
}

function displayDiv(id){
for(var i=0; i<list_div.length; i++){
var div = document.getElementById(list_div[i]);
//On rend la div visible si son id est le même que celui passé en paramètre de la fonction, sinon on la masque
div.style.display = (div.id == id ? '' : 'none');
}
}

</script>

Elias le Vert

25 janvier 2009 à 20:43:48

Tu peux poster l'HTML avec lequel tu as testé ça ?

SRL Killing

25 janvier 2009 à 20:46:39

C'est quoi ça :

div.style.display = (div.id == id ? '' : 'none');

Elias le Vert

25 janvier 2009 à 21:03:05

C'est une opération ternaire : (condition ? valeur de retour si true : valeur de retour si false)
- div est une des div à masquer/afficher
- id est l'id passé en paramètre de la fonction déterminant quelle div doit être affichée
-> donc div.id == id vaut true si c'est la div que l'on doit afficher, false sinon
-> on modifie le display de la div, si div.id == div on doit l'afficher : on le met à '' (vide, cela redonne à l'élément son comportement standard, block ou span selon la valise), sinon on le met à 'none' (on masque l'élément au cas où il était affiché)

Donc :

div.style.display = (div.id == id ? '' : 'none');

Signifie : "Le display de la div vaut '' et elle est affichée si l'id de la div correpond à l'id passé à la fonction, sinon on met le display à none".

SRL Killing

25 janvier 2009 à 21:10:30

Ok merci, mais pourquoi pas utiliser :

function displayDiv(id){
    for(var i=0; i<list_div.length; i++){
       getElementById(list_div[i]).style.display = "none"; // On les cache tous
   }
   getElementById(id).style.display = "block"; // On affiche le bon
}

Ou l'inverse, si c'est pour les cacher

Elias le Vert

25 janvier 2009 à 21:27:37

Bah, ça revient strictement au même, j'vois pas pourquoi on ferait l'un et pas l'autre :-°

Mais comme tu parcours déjà toutes les divs, autant en profiter pour tout faire lors de ce parcours.
Et puis pour le fait de donner un display vide au lieu de block, cf mon post précédent concernant le retour au comportement naturel de l'élément (ainsi pas besoin de te demander "est-ce un span et je dois mettre inline, ou est-ce un div et je dois mettre block ?").

tony7000

25 janvier 2009 à 21:47:19

voici tout le html de ma page
La partie où se trouve les codes html que tu m as donné commence à partir de la ligne 76

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Sports COM web - la communication internet des talents sportifs</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Création et gestion de sites web, promotion, référencement, communication visuelle, e-marchandising.
<meta name="keywords" content="sportscom,sports,com,communication,webdesign,tennis,hendler,van snick,site,web,graphisme,pub,création,tennis,foot,judo,basket,cyclisme,athlétisme,website,webmaster" />

<link rel="icon" type="image/png" href="images/icon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="images/icon.ico" /><![endif]-->

<link rel="stylesheet" media="screen" type="text/css" title="Mécanique" href="design.css" />

<script Language="javascript">
var list_div = new Array('page1', 'page2');

//Au chargement de la page, on ne laisse affichée que la première div
window.onload = function(){
	for(var i=1; i<list_div.length; i++){ //On commence la boucle à 1 pour ne pas modifier la première div de la liste
		var div = document.getElementById(list_div[i]);
		div.style.display = 'none';
	}
}

function displayDiv(id){
	for(var i=0; i<list_div.length; i++){
		var div = document.getElementById(list_div[i]);
		//On rend la div visible si son id est le même que celui passé en paramètre de la fonction, sinon on la masque
		div.style.display = (div.id == id ? '' : 'none');
	}
}

</script>

</head>
   <body>

<div id="fond">
</div>




<div id="logo">

<a href="../index.php"><img src="images/logo.jpg"></a>

</div>

<div id="news">
<?php
    // On inclue le haut de la page
    include("include/news.php");
    ?>
</div>

<div id="menu">
<?php
    // On inclue le haut de la page
    include("include/menu4.php");
    ?>
</div>

<div id="visages">
<?php
    // On inclue le haut de la page
    include("include/visages.php");
    ?>
</div>


<div id="photos2">
</div>


<div id="corps3">

<a href="javascript:displayDiv('page1');">Tamaryn Hendler</a> <a href="javascript:displayDiv('page2');">Charline Van Snick</a>

</div>


  <div id="page1">
	L'ornithorynque (Ornithorhynchus anatinus) est une petite espèce de mammifère semi-aquatique endémique de l'est de l'Australie, y compris en Tasmanie. C'est
	l'une des cinq espèces de l'ordre des monotrèmes, les seuls mammifères qui pondent des ?ufs au lieu de donner naissance à des petits vivants (les quatre
	autres espèces sont des échidnés). C'est la seule espèce survivante de la famille des Ornithorhynchidae et du genre Ornithorhynchus bien qu'un grand nombre de
	fragments d'espèces fossiles de cette famille et de ce genre aient été découvertes.
</div>

<div id="page2">
	L'apparence bizarre de ce mammifère pondant des ?ufs, muni d'aiguillons venimeux, à bec de canard, à queue de castor et à pattes de loutre a fortement surpris
	les premiers explorateurs qui l'ont découvert et bon nombre de naturalistes européens ont cru à une plaisanterie. C'est l'un des rares mammifères venimeux :
	le mâle porte un aiguillon sur les pattes postérieures qui peut libérer du venin capable d'infliger de vives douleurs à un être humain. Les traits originaux
	de l'ornithorynque en font un sujet d'études important pour connaître l'évolution des espèces animales et en ont fait un des symboles de l'Australie : il a été
	utilisé comme mascotte pour de nombreux évènements nationaux et il figure au verso de la pièce de 20 centimes (cents) australiens.
</div>





<div id="pub">
<?php
    include("include/pub.php");
    ?>
</div>

<div id="pub2">
<?php
    include("include/pub2.php");
    ?>
</div>

<div id="footer">
<?php
    include("include/footer.php");
    ?>
</div>

</body>
</html>

Elias le Vert

26 janvier 2009 à 6:40:02

Et bien écoute, je ne sais que trop faire pour t'aider, parce que... chez moi ça marche :-°

J'ai copié-collé ton code, ça fonctionne. J'ai bien sûr des erreurs PHP pour les includes que je n'ai pas, mais le javascript fonctionne très bien, en cliquant sur un des deux liens ça change le texte affiché.

tony7000

26 janvier 2009 à 12:11:49

toutes mes excuses elias!! en effet, j ai vérifié mon site sur un autre pc... et tu as raison le javascript fonctionne parfaitement !!

j ai bien l impression que c est juste mon pc qui déconne donc un peu avec le javascript mais c est étrange car il y a des sites avec du java qui fonctionnent bien avec mon pc

enfin soit, si ça marche avec tous les autres pc c est l essentiel :lol:

merci bcp pour ce script!!

bonne journée