Discussion :

[nanaye]

Bonjour,

Mon code marche sous FireFox et a partie de IE 9, en dessous non, et sous Safari non plus.
Je ne suis pas une pro en javascript et mon code n'est surment pas des plus simples. Ce que je voudrais, c'est que par option s'affiche un texte et une image différente (d'où le onClick sur l'option et non un OnChange sur le select) dans un DIV et que je puisse changer la DIV de départ qui s'affiche

le CSS pour une image

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.img1 {
    margin: 0;
    padding: 0; 
    text-align: left;
    background-image: url(img.png); 
    background-repeat: no-repeat; 
    background-position: center;
    height: 732px;
}

le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<p>
    <select id="carte"  name="carte">
        <option value="">Choisissez une date</option>
        <option value="septembre15" onClick="javascript:visibilite('div_texte1');"><span class=mef>26 septembre 2015</span></option>
        <option value="octobre15" onClick="javascript:visibilite('div_texte2');"><span class=mef>15 octobre 2015</span></option>
        <option value="novembre15" onClick="javascript:visibilite('div_texte3');"><span class=mef>28 novembre 2015</span></option>
        <option value="décembre15" onClick="javascript:visibilite('div_texte4');"><span class=mef>10 décembre 2015</span></option>
        <option value="janvier16" onClick="javascript:visibilite('div_texte5');"><span class=mef>17 janvier 2016</span></option>
        <option value="février16" onClick="javascript:visibilite('div_texte6');"><span class=mef>18 février 2016</span></option>
        <option value="mars16" onClick="javascript:visibilite('div_texte7');"><span class=mef>20 mars 2016</span></option>
        <option value="avril16" onClick="javascript:visibilite('div_texte8');"><span class=mef>21 avril 2016</span></option>
        <option value="mai16" onClick="javascript:visibilite('div_texte9');"><span class=mef>26 mai 2016</span></option>
        <option value="juin16" onClick="javascript:visibilite('div_texte10');"><span class=mef>30 juin 2016</span></option>
    </select>
</p>
<div id="div_texte1" style="display:block;" >           
    <h3>PROJET DU 26 SEPTEMBRE 2015</h3>
    <p class="img1"></p>
</div> 
<div id="div_texte2" style="display:none;">
    <h3>PROJET DU 15 OCTOBRE 2015</h3>
    <p class="img2"></p>
</div>                 
<div id="div_texte3" style="display:none;">
    <h3>PROJETDU 28 NOVEMBRE 2015</h3>
    <p class="img3"></p>
</div>

Le Javascript (que je mets dans la page sinon il ne marche pas...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var divPrecedent=document.getElementById('div_texte1');    
function visibilite(divId)    {        
    divPrecedent.style.display='none';        
    divPrecedent=document.getElementById(divId);        
    divPrecedent.style.display='';
 }

Si quelqu'un a une idée ou un code plus simplifié qui marcherait sous Safari et IE 7 et 8 ? Un grand merci

[Darkauron]

Salut,

Tu peux utiliser onchange sur le select et connaitre quelle option a été sélectionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select id="carte" name="carte" onchange="visibilite(this)">

et dans ton JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function visibilite(divId)
{
   var optionSelected = divId.selectedIndex;
}

Et ensuite, en fonction de ce que tu récupère, tu affiches ton image.
Commence par améliorer ça, on reparlera de compatibilité après

[nanaye]

Bonjour,

Merci de votre réponse.

J'enlève les onclick ou pas ? et la fonction se réduit à ce que vous m'avez donné ?

[nanaye]

J'ai mis le onChange, garder les onclick et mis votre fonction, mais ça ne marche pas plus...

[Darkauron]

Oui tu enlèves les onclicks et non la fonction ne se limite pas à ce que j'ai mis.
Ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function visibilite(divId)
{
   var optionSelected = divId.selectedIndex;
}

récupère juste la "position" de l'option dans ton select. Dans ton exemple, l'option septembre15 retourne 1.

Tu peux tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function visibilite(divId)
{
   var optionSelected = divId.selectedIndex;
   divPrecedent.style.display='none';
   divPrecedent=document.getElementById("div_texte"+optionSelected);
   divPrecedent.style.display='';
}
}

Par contre, dans ce cas, il faut toujours que l'ordre de tes div corresponde à l'ordre de tes options (septembre2015 -> div_texte1, octobre15 -> div_texte2, ...)

[nanaye]

Bonjour,
Merci pour ces précisions... ça ne marche pas plus et ça ne marche plus sous Firefox...

[Darkauron]

Peux tu me dire s'il y a des erreurs dans la console ?

[sekaijin]

1. on ne met pas onClick ou onChange mais onclick et onchange.
2. dans les attributs onclick ou onchange on met du code javascript pas javascript:.....
3. on ne mets pas de onclick sur les optiosn car l'utilisateur peut sélectionner une option avec le clavier (il n'y a pas de click dans ce cas)
4. @Darkauron t'a donné une fonction qui te permets de connaitre quelle option a été choisi il te laisse le soin d'exploiter correctement ce choix à toit de l'écrire.
5. ton javascript ne marche pas si tu ne le mets pas dans la page car tu référence élément qui n'existe pas encore. pour résoudre cela il te suffit de placer ton code dans l'événement onload.
6. tu as dans l'éditeur du forum un joli bouton # qui produit une balise [code] place ton code dans cette balise pour le css ajoute [code=css] pour le html [code=html] et pour le javascript ne mets pas <javascript> et laisse la balise [code] ça rendra ton post plus clair

A+JYT

[nanaye]

Bonjour,

Désolé de ne pas être une expert en forum, en balise <code>, … je vais essayer de faire mieux… et ni en javascript, d’où ma demande sur ce forum…

Le onclick n’existe plus, le onchange n’a pas de majuscules et le script est dans le <head> et cela ne fonctionne toujours pas…

Et il n’y a pas d’erreur qui s’affiche…

voici le code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<select id="carte"  name="carte" onchange="visibilite(this)">
                <option value="">Choisissez la date des intercessions</option>
                <option value="septembre15">26 septembre 2015</option>
                <option value="octobre15">15 octobre 2015</option>
                <option value="novembre15">28 novembre 2015</option>
                <option value="décembre15">10 décembre 2015</option>
                <option value="janvier16">17 janvier 2016</option>
                <option value="février16">18 février 2016</option>
                <option value="mars16">20 mars 2016</option>
                <option value="avril16">21 avril 2016</option>
                <option value="mai16">26 mai 2016</option>
                <option value="juin16">30 juin 2016</option>
                </select>
 
                <div id="div_texte1" style="display:block;">           
                <h3>PROJET DU 26 SEPTEMBRE 2015</h3>
                <p class="img1"></p>
                </div> 
 
                <div id="div_texte2" style="display:none;"> 
                <h3>PROJET DU 15 OCTOBRE 2015</h3>
                <p class="img2"></p>
                </div>

Et le script dans le <head>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function visibilite(divId)
{
 var optionSelected = divId.selectedIndex;
divPrecedent.style.display='none';
divPrecedent=document.getElementById("div_texte"+optionSelected);
divPrecedent.style.display='';
}
}

[Darkauron]

Dans la javascript, il y a 2 } à la fin, erreur de copier coller ?

Pour faire plus propre, il serait bien de séparer le html du js, donc :
Dans le html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="script.js"></script>

et dans un fichier js script.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/*Permet d'initialiser divPrecedent une fois que le DOM est chargé*/
window.onload = function ()
{
	divPrecedent=document.getElementById("div_texte1");
}
 
/*Affiche l'image en fonction du choix*/
function visibilite(divId)
{
	var optionSelected = divId.selectedIndex;
	if(optionSelected != 0) {
		divPrecedent.style.display='none';
		divPrecedent=document.getElementById("div_texte"+optionSelected);
		divPrecedent.style.display='';
	}
 
}

Pour info, ton code fonctionne uniquement sur les 3 premières options car il n'existe pas de div_texte4 et plus.
Dans ce cas, on peut ajouter des tests dans le javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function visibilite(divId)
{
	var optionSelected = divId.selectedIndex;
	if(optionSelected != 0) {
		divPrecedent.style.display='none';
		if (document.getElementById("div_texte"+optionSelected)!=null) {
			divPrecedent=document.getElementById("div_texte"+optionSelected);
		}
		else {
			divPrecedent=document.getElementById("div_texte1");
		}
 
		divPrecedent.style.display='';
	}
}

[nanaye]

Merci beaucoup, ça fonctionne sur le dernier code donné !
Il y a bien les div_texte4 jusqu'au div_texte10 mais je pensais qu'il n'étais pas nécessaire de rallonger le code... désolé, j'aurai du le spécifier
Un grand merci

[Darkauron]

Je m'en suis douté pour les div 4 à 10 mais je préfère préciser. Pense à mettre en résolu si tout est bon.

[sekaijin]

un dernier point ajoute disabled sur l'option

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<option value="" disabled >Choisissez la date des intercessions</option>

A+JYT