Probleme onClick avec IE 7 et 8 et Safari [Résolu]

Question

Sujet Précédent Sujet Suivant

Probleme onClick avec IE 7 et 8 et Safari [Résolu]

Signaler

nanaye

Messages postés: 7
Date d'inscription: mercredi 5 août 2015
Statut: Membre
Dernière intervention: 5 août 2015

- 5 août 2015 à 10:31
nanaye

Messages postés: 7
Date d'inscription: mercredi 5 août 2015
Statut: Membre
Dernière intervention: 5 août 2015

- 5 août 2015 à 12:06

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


.img1 {
    margin: 0;
    padding: 0; 
    text-align: left;
    background-image: url(img.png); 
    background-repeat: no-repeat; 
    background-position: center;
    height: 732px;
}

le HTML


<select id="carte"  name="carte">
                <option value="">Choisissez une date</option>
                <option value="septembre15" onClick="javascript:visibilite('div_texte1');">26 septembre 2015</option>
                <option value="octobre15" onClick="javascript:visibilite('div_texte2');">15 octobre 2015</option>
                <option value="novembre15" onClick="javascript:visibilite('div_texte3');">28 novembre 2015</option>
                <option value="décembre15" onClick="javascript:visibilite('div_texte4');">10 décembre 2015</option>
                <option value="janvier16" onClick="javascript:visibilite('div_texte5');">17 janvier 2016</option>
                <option value="février16" onClick="javascript:visibilite('div_texte6');">18 février 2016</option>
                <option value="mars16" onClick="javascript:visibilite('div_texte7');">20 mars 2016</option>
                <option value="avril16" onClick="javascript:visibilite('div_texte8');">21 avril 2016</option>
                <option value="mai16" onClick="javascript:visibilite('div_texte9');">26 mai 2016</option>
                <option value="juin16" onClick="javascript:visibilite('div_texte10');">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>                 
                
                <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...)


<script>    
                var divPrecedent=document.getElementById('div_texte1');    
                function visibilite(divId)    {        
                divPrecedent.style.display='none';        
                divPrecedent=document.getElementById(divId);        
                divPrecedent.style.display='';    }
</script>

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

A voir également:

Probleme onClick avec IE 7 et 8 et Safari
Jouer des sons wav avec directx 7 et 8 - Codes sources - Visual Basic / VB.NET (Direct X)
Lien sur salon aol 7 et 8 - Codes sources - Visual Basic / VB.NET (Réseau & Internet)
Visual Basic / VB.NET : Afk pour aol 7 et 8 - CodeS SourceS - Guide
Problème javascript entrainant des lenteurs avec IE 7 ✓ - Forum - Javascript / DHTML
Problème avec IE 7 CSS ✓ - Forum - PHP

2 réponses

Répondre Posez votre question

@karamel · Answer 1 · 2015-08-05T10:39:29+0200

Réponse 1 / 2

@karamel

Messages postés: 1787
Date d'inscription: vendredi 9 mai 2008
Statut: Non membre
Dernière intervention: 9 juin 2021

131
Modifié par kazma le 5/08/2015 à 10:42

bonjour
onclick ne prend pas de majuscule onclick et il est inutile de mettre javascript

onclick="visibilite('div_texte1')"

rien ne sert de courir il faut partir a point.
cours Forest cours !

Signaler

nanaye

Messages postés: 7
Date d'inscription: mercredi 5 août 2015
Statut: Membre
Dernière intervention: 5 août 2015

5 août 2015 à 10:44

bonjour,
même en enlevant la majuscule, ça ne marche pas...

Signaler

nanaye

Messages postés: 7
Date d'inscription: mercredi 5 août 2015
Statut: Membre
Dernière intervention: 5 août 2015

5 août 2015 à 10:49

meme en enlevant le javascript...

@karamel · Answer 2 · 2015-08-05T11:58:30+0200

la faconde faire est pas propre il est fort possible que ie comme safarie ne supporte pas onclick dans les option du selecte generalement on met un onchange dans la balise select

voie de cette facon qui utilise l'index du select

<!doctype html>
<html>
<head>
<script>
 var divPrecedent='div_texte1';   
 
function visibilite(lui)    {

	var index=lui.selectedIndex;
	var dv="div_texte"+index;
	document.getElementById(divPrecedent).style.display='none';   
	divPrecedent=dv;        
	document.getElementById(divPrecedent).style.display='';  
	}
 
</script>
</head>
<body>

<select id="carte"  name="carte" onchange="visibilite(this)">
                <option value="">Choisissez une date</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>                 
                
                <div id="div_texte3" style="display:none;">
                <h3>PROJETDU 28 NOVEMBRE 2015</h3>
                <p class="img3"></p>
                </div>
</body>
</html>

rien ne sert de courir il faut partir a point.
cours Forest cours !

Votre réponse