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...

[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='';
}
}