image cliquable

11 juin 2008, 15:18

Salut,

Merci d'avoir répondu, le code de b.jerome répond à mes attentes ou celles de mon boss plutot ...

, c'est cool
Mais bon voilà deux choses se profilent :

1°. Voilà à quoi ressemble mon code ( vous marrez pas...)

<center>
<a href="images/media/Controle_lasergram.ppt"> <img src="images/media/Paillat.bmp" Width="200"Height="104" alt="M.N.T. site du Pallat" title="Paillat_RN116" /></a>
<a href="images/media/ass_gifi.flv" type="application/x-shockwave-flash" > <img src="images/media/gifi_gris.jpg" Width="210"Height="105" alt="Réaménagement local commercial" title="Local_commercial" /></a>
<a href="relief.html"> <img src="images/media/resize/cube.PNG" Width="100"Height="105" alt="Remblai" title="Cube_remblai" /></a>
<a href="images/media/elne_la_nuit.flv"> <img src="images/media/resize/03.jpg" Width="122" Height="105" alt="Cité médievale" title="Cité_Villefranche" /></a> 
<a href="images/media/villefranche.flv"> <img src="images/media/resize/53.PNG" Width="140" Height="105" alt="Cité médievale" title="Cité_Villefranche" /></a> 
</center>

donc jusqu`à maintenant j'étais presque arrivé au résultat escompté : les images sont bien présentes, lorsque l'on clique dessus le téléchargement de la vidéo correspondante est lancé, pas de pblme... Malheureusement c'est au moment de la lecture que ca ne va pas, suivant la machine utilisée, la vidéo est lu par le lecteur par défaut du pc en question, et le format (flv) n'est bien bien que rarement supporté.
Donc ma question est : comment proposer de télécharger le pluggin adéquate pour lire le format flv s'il n'ya pas de lecteur adéquate présent sur la machine?
Je crois que la réponse est dans les portions de code postées plus haut, mais je n'ai pas trouvé

2°. J'ai voulu conservé la présentation de ma page web (quelques images cote à cote), et insérer le code de b.jerome pour voir si ca fonctionne bien. J'ai fais le test avec deux img pour deux vidéos différentes, en insérant le code de b.jerome dans un tableau.
Voilà le code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zacdis</title>
</head>
<body>
<table>
<tr>
<td><script type="text/javascript">
function showDiv(n) {
   var id;
   var hide = 0;
   switch(n) {
      case 1 : id = "img"; break;
      case 2 : id = "lecteur"; break;
      }
   if ( document.getElementById(id).style.display == "block" ) hide = 1;
   document.getElementById('img').style.display = "none";
   document.getElementById('lecteur').style.display = "none";
   if ( hide != 1 ) document.getElementById(id).style.display = "block";
   }
</script>
<div><center>
<div class="baliseDiv" id="img">
Clickez l'image pour voir la video...<br /><br />
<span class="java" onclick="showDiv(2)"><img src="images/media/gifi_gris.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur">
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185">
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=elne_la_nuit.flv&autostart=true&loop=true"/>
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p>
</object>
<span class="java" onclick="showDiv(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span>
</div>
</div></td>
<td><script type="text/javascript">
function showDiv(n) {
   var id;
   var hide = 0;
   switch(n) {
      case 1 : id = "img"; break;
      case 2 : id = "lecteur"; break;
      }
   if ( document.getElementById(id).style.display == "block" ) hide = 1;
   document.getElementById('img').style.display = "none";
   document.getElementById('lecteur').style.display = "none";
   if ( hide != 1 ) document.getElementById(id).style.display = "block";
   }
</script>
<div><center>
<div class="baliseDiv" id="img">
Clickez l'image pour voir la video...<br /><br />
<span class="java" onclick="showDiv(2)"><img src="images/media/resize/03.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur">
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185">
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=villefranche.flv&autostart=true&loop=true"/>
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p>
</object>
<span class="java" onclick="showDiv(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span>
</div>
</div></td>
</tr>
</table>
</body>
</html>

Le soucis c'est que les deux images renvoi à la même vidéo

http://zenithtopo.free.fr/SITE_TEST/img_video.html

Pourquoi?? Qu'est qui ne va pas (encore...)

??

Merci

11 juin 2008, 16:41

C'est normal il faut modifier le javascript en conséquence... si tu as plusieurs image/video il faut donner des nouveaux noms aux ID des balises.

exemple

Code : Tout sélectionner

   switch(n) { 
      case 1 : id = "img"; break; 
      case 2 : id = "lecteur"; break; 
      case 3 : id = "img2"; break; 
      case 4 : id = "lecteur2"; break; 
      case 5 : id = "img3"; break; 
      case 6 : id = "lecteur3"; break; 
      }

toi tu as dupliquer la fonction showDiv() ce qui ne sert a rien ou alors faut lui changer de nom. Mais il faudra tout de même changer les id des balises DIV et le numero corespondant dans la balise span. heu je sais pas si c'est très clair ?

11 juin 2008, 17:05

après reflection je me suis dit que tu aimerais garder l'image 1 visible pendant que la video 2 apparait et ainsi de suite alors voilà comme je pense que j'ai pas été très clair...

tu pourra aisément suivre cette exemple si tu veux ajouter d'autre img/videos...

Code : Tout sélectionner


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Zacdis</title> 
</head> 
<body> 
<table> 
<tr> 
<td><script type="text/javascript"> 
function showDiv(n) { 
   var id; 
   var hide = 0; 
   switch(n) { 
      case 1 : id = "img"; break; 
      case 2 : id = "lecteur"; break; 
      } 
   if ( document.getElementById(id).style.display == "block" ) hide = 1; 
   document.getElementById('img').style.display = "none"; 
   document.getElementById('lecteur').style.display = "none"; 
   if ( hide != 1 ) document.getElementById(id).style.display = "block"; 
   } 
</script> 
<div><center> 
<div class="baliseDiv" id="img"> 
Clickez l'image pour voir la video...<br /><br /> 
<span class="java" onclick="showDiv(2)"><img src="images/media/gifi_gris.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur"> 
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185"> 
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=elne_la_nuit.flv&autostart=true&loop=true"/> 
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p> 
</object> 
<span class="java" onclick="showDiv(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span> 
</div> 
</div></td> 
<td><script type="text/javascript"> 
function showDiv2(n) { 
   var id; 
   var hide = 0; 
   switch(n) { 
      case 1 : id = "img2"; break; 
      case 2 : id = "lecteur2"; break; 
      } 
   if ( document.getElementById(id).style.display == "block" ) hide = 1; 
   document.getElementById('img2').style.display = "none"; 
   document.getElementById('lecteur2').style.display = "none"; 
   if ( hide != 1 ) document.getElementById(id).style.display = "block"; 
   } 
</script> 
<div><center> 
<div class="baliseDiv" id="img2"> 
Clickez l'image pour voir la video...<br /><br /> 
<span class="java" onclick="showDiv2(2)"><img src="images/media/resize/03.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur2"> 
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185"> 
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=villefranche.flv&autostart=true&loop=true"/> 
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p> 
</object> 
<span class="java" onclick="showDiv2(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span> 
</div> 
</div></td> 
</tr> 
</table> 
</body> 
</html>

par contre comme je l'ai dit dans un message précédent il serait plus judiciable d'utilise la librairie swfObject qu'a citée Cyrano pour controler le flash. Par ce que le en imaginant que la personne ferme la video avant la fin elle continuera de jouer en étant invisible ce qui peu être ennuyeux si la video comporte du son... de plus la video ne sera plus en auto start si la personne ferme la video et tente de la revoir, il lui faudra appuyer sur le play du lecteur...

12 juin 2008, 12:21

Parfait, c'est comme y faut...Merci b.jerome, et tous les autres

Voici la page pour ceux que ça intéresse, quelques petits détails à régler, mais l'objectif est atteint, c'est cool ...

http://zenithtopo.free.fr/SITE_TEST/index.html

Il y quelques éléments qui m'ennuient sur la dite page, et sur le site de manière générale. Notamment au niveau de la "dynamique" du gabarit, suivant la résolution utilisée ...Alors pour ceux qui ont un moment, allez y vous gênez pas.
Le site n'est pas "top classe", faites pas attention, mais mon boss est plutôt satisfait, alors ... moi aussi .

A+

image cliquable

Qui est en ligne