11548 sujets

JavaScript, DOM et API Web HTML5

[javascript] mettre plusieurs fois un scriptjava dans une même page

Bonjour à tous
je rencontre un problème :
je voudrais avoir 2 boutons, qui chacun lanceront le div video associé.
Jusqu'à la théorie ça va, mais la pratique non :
j'ai créer les div nécessaires ( 2div boutons et 2div videos), mais lorsque je veux faire de même avec le code javascript (id différent bien sur), j'ai le problème suivant: seul le dernier code est actif, c'est à dire que je clique sur l'ancien bouton ou le nouveau, [apparement le navigateur (FFox) considère cela comme un seul bouton à 2 endroits] la div video n°2 se lance....

<style>
.FLVplayer 
  {
  width: 384px;
  height: 288px;
  display: none;
  text-align: center;
  border: 0px red;
  text-decoration: none;
  position:absolute;
  top:150px;
  left:200px;
  margin:0px 0px;
  z-index: 89;
 }
 
 .FLV2 
  {
  width: 384px;
  height: 288px;
  display: none;
  text-align: center;
  border: 0px red;
  text-decoration: none;
  position:absolute;
  top:150px;
  left:200px;
  margin:0px 0px;
  z-index: 89;
 }

.espoir
  {
  display:bloc;
  position:absolute;
  background-image: url(B/01/th001.jpg);
  background-repeat: no-repeat;
  top:256px;
  left:815px;
  width: 170px;
  height: 38px;
  border:1px; 
  padding: 0;
  z-index:89;
  color:white;
  opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1
  
   }
  .anim
  {
  display:bloc;
  position:absolute;
  background-image: url(B/01/th002.jpg);
  background-repeat: no-repeat;
  top:296px;
  left:505px;
  width: 170px;
  height: 38px;
  border:1px; 
  padding: 0;
  z-index:89;
  color:white;
  opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1
  
   }
</style>


<div class="espoir" id="opa" onclick="showDiv();" onmouseover="opac()" onmouseout="opac()">
</div>

<div class="anim" id="T2" onclick="showDiv();" onmouseover="opac()" onmouseout="opac()">
</div>


<div class="FLVplayer" id="monid">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=D/03/jflerouxphotoM.FLV&autostart=false&clicktext=Making-off  ( clic to play )">
	<param name="movie" value="flvplayer.swf?file=D/03/jflerouxphotoM.FLV&autostart=false&clicktext=Making-off  ( clic to play )" />
	<param name="wmode" value="transparent" />
</object>
Photo-montage <br>"Am&eacute;lioration d'un lieu".
</div>

<div class="FLV2" id="m2">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=D/03/jflerouxphotoM2.FLV&autostart=false&clicktext=Making-off  ( clic to play )">
	<param name="movie" value="flvplayer.swf?file=D/03/jflerouxphotoM2.FLV&autostart=false&clicktext=Making-off  ( clic to play )" />
	<param name="wmode" value="transparent" />
</object>
Photo-montage <br>"Am&eacute;lioration d'un lieu".hierhvihzveizreef
</div>


<script language="javascript">
function showDiv(){
  
  document.getElementById('monid').style.display = (document.getElementById('monid').style.display == 'none')?"block":"none";
  

  }
  
function opac(){
   if(document.getElementById("opa").style.filter == "alpha(opacity=100)"){
      document.getElementById("opa").style.filter = "alpha(opacity=10)";
      document.getElementById("opa").style.MozOpacity = "0.1";
      document.getElementById("opa").style.KhtmlOpacity = "0.1";
   }
   else{
      document.getElementById("opa").style.filter = "alpha(opacity=100)";
      document.getElementById("opa").style.MozOpacity = "1";
      document.getElementById("opa").style.KhtmlOpacity = "1";
   }
   
   
}

function showDiv(){
  
  document.getElementById('m2').style.display = (document.getElementById('m2').style.display == 'none')?"block":"none";
  

  }
  
function opac(){
   if(document.getElementById("T2").style.filter == "alpha(opacity=100)"){
      document.getElementById("T2").style.filter = "alpha(opacity=10)";
      document.getElementById("T2").style.MozOpacity = "0.1";
      document.getElementById("T2").style.KhtmlOpacity = "0.1";
   }
   else{
      document.getElementById("T2").style.filter = "alpha(opacity=100)";
      document.getElementById("T2").style.MozOpacity = "1";
      document.getElementById("T2").style.KhtmlOpacity = "1";
   }
   
   
}
</script>


si quelqu'un pouvait m'aider je lui en serait grandement reconnaissant Smiley cligne
ça doit être moi qui ai mal interpreté qq chose, dites le moi

cordialement et merci d'avance
Modifié par qmulonainbus (26 Sep 2006 - 13:54)
Modérateur
Bonjour qmulonainbus,

Peux-tu éditer ton titre et le rendre plus explicite s'il te plaît puisque comme tu t'en doutes, bon nombre de membres, en postant sur le forum, ont de gros problèmes; ceci t'aiderait dans ta démarche.

Merci d'avance. Smiley cligne
Modérateur
Merci. Smiley smile

Je n'ai que peu de temps et j'ai vite fait survolé ton sujet donc s'il y a problème, je veux bien qu'un autre membre prenne la relève. Smiley cligne

En gros, tu dois mettre le nom de ton id en argument de tes fonctions :

ex. :

function showDiv(id){
  
  document.getElementById(id).style.display = (document.getElementById(id).style.display == 'none')?"block":"none";
  

  }

puis mettre dans tes appels :

<div class="espoir" id="opa" onclick="showDiv('monid');" onmouseover="opac('monid')" onmouseout="opac('monid')">
</div>

<div class="anim" id="T2" onclick="showDiv('m2');" onmouseover="opac('m2')" onmouseout="opac('m2')">
</div>

Il faut en faire de même pour la fonction opac (et inutile de dédoubler tes fonctions; ça écrase la première déclaration de la fonction quand tu procèdes ainsi). Smiley cligne

Je ne te promets rien, comme je le disais, j'ai lu vite fait... Smiley confused
Modifié par koala64 (26 Sep 2006 - 14:09)
;) ok je vais voir
néamoins je te fais un petit résumé :

-1 bouton + 1 clic = apparition d'une div avec une video dedans (les effetc de transparence ce n'est que de l'embellissement)

-jaimerais mettre plusieurs boutons de ce genre sur un page et chacun appel une vidéo différente, ce que j'ai mis comme code c'est là où jen suis avec 2 boutons (ça marche pas)

car comme tu dis le 2ème code écrase le premier....

toutes les propositions ou idées sont les bienvenues ^^
Bonjour,

Moi, j'ai lu très vite et je n'ai retenu qu'une seule chose :
z-index:89;
Pour moi, c'est une aberration...ou tu ne sais pas ce que c'est que le z-index.
Ça démarre à 0 pour le 1er plan et deux éléments ne peuvent pas avoir le même, sous peine de s'afficher sur le même plan.
Alors de démarrer au 89ème plan, c'est rigolo.
Encore est-il que si tu ne les méttais pas tous sur le même, ça changerait peut-être quelquechose.
Modifié par Deny (27 Sep 2006 - 16:47)
Bonjour à toi deny
je sais parfaitement ce qu'est le z-index Smiley cligne merci
je ne poste pas tout mon code, mais une partie autonome à problème (le pb ne se situe pas dans le reste du code)
donc oui j'ai un z-index de 89 et après ça ne regarde que mon code
et pour info oui il démarre à 0.

donc relie plus lentement si posssible Smiley lol
tu trouveras peuêtre une autre erreur
Nico Nico a écrit :
remplace display:bloc; par display:block;

voilà.

oui aussi Smiley smile

qmulonainbus : est-ce que ce que t'as proposé koala a fait quelque chose ? car à première vue je dirais comme lui...

et, en effet, je vois pas bien le but de dédoubler les fonctions... Smiley confus
Sujet clos
Aller à