Appeler photos et vidéos sur programme html

JPhL · 26/04/2008, 20h50

Bonjour à tous

Le titre ne correspond pas forcément au problème que je veux soulever, mais je ne sais pas comment le nommer autrement... Désolé !

Voici mon pb : je suis prof d'EPS en collège. N'étant plus en age de faire les démonstrations (eh oui, toutes les bonnes choses ont une fin...), j'ai créé pour les élèves un petit programme avec Dreamweaver. Je vous le décris et je mettrais un lien pour le télécharger :

Une page d'accueil vers les différents agrès filles et garçons (parallèles - fixes - poutre - asymétriques - sol - cheval). Sur la page qui s'ouvre correspondant à un de ces agrès, un protocole de compétition avec les dessins des 40 figures proposées. En cliquant sur chacune des figures, s'ouvre une page avec la figure agrandie et la vidéo correspondant mouvement proposé.

Pour que ce produit qui fonctionne super soit encore plus intéressant pour les élèves, j'ai pensé qu'il serait bien qu'à partir d'un lien sur la page des protocoles de chacun des agrès, les élèves puissent accéder à une page où ils pourraient construire leur propre enchaînement. Je verrai la chose comme cela :

Par exemple : 6 cases de formulaire l'une en dessous de l'autre dans lesquelles l'élève pourrait entrer les coordonnées des figures envisagées (par exemple : poutre : A5 - B2 - etc.) En validant leur choix, les dessins apparaissent à côté des cases pour que l'élève ait une vue des figures envisagées l'un en dessous de l'autre. Et ce qui serait le mieux, c'est qu'une fenêtre « vidéo » soient sur la même page, avec les vidéos de chaque figure qui apparaissent l'une après l'autre, dans l'ordre des figures choisies par l'élève...

Vous voyez, c'est simple ! Rien de bien extraordinaire...

Alors, d'abord, est-ce possible ? Et ensuite, comment est-ce possible ?

Merci pour votre aide.

JPhL · 26/04/2008, 21h50

J'ai oublié de mettre le lien vres le programme

videos gym

JPhL · 26/04/2008, 22h35

Rebonsoir

Je joins déjà le début de la page avec le tableau de 2 colonnes : celle de gauche avec les codes des éléments à mettre, celle de droite avec un cadre de photo vide... C'est là que je voudrais que les photos correspondant au code apparaissent...

asymetriques.zip

**Bruno** · 27/04/2008, 02h19

Bonjour,

En HTML, c'est que du statique donc ça ne va pas être possible. C'est faisable soit en ajoutant un peu de PHP à la page (donc il faut recharger la page à chaque fois), soit ajouter du JavaScript et là pas besoin de recharger la page.

A voir en vidéo sur Futura · Aujourd'hui

**Bruno** · 27/04/2008, 02h59

Voici le code de la page modifiée (kdo) :

Code HTML:

<!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>UNSS - Gymnastique Sportive</title>
<style type="text/css">
<!--
body {
	background-color: #e5a18e;
}
.Style1 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: large;
}
-->
</style></head>

<script language="javascript" type="text/javascript">
<!--
function update_image1(newimage)
{
	if (newimage == '')
	{
		document.element1.src = "./A1.JPG";
	}
	else
	{
		document.element1.src = "./" + newimage + ".JPG";
	}
}

function update_image2(newimage)
{
	if (newimage == '')
	{
		document.element2.src = "./A1.JPG";
	}
	else
	{
		document.element2.src = "./" + newimage + ".JPG";
	}
}
//-->
</script>

<body>


<table width="981" height="535" border="2" align="center" bordercolor="#FFFFFF">
  <tr>
    <td height="71"><div align="center" class="Style1">Choisir un élément</div></td>
    <td><div align="center" class="Style1">Image de l'élément</div></td>
  </tr>
  <tr>
    <td width="238" height="230"><div align="center"><FORM name="selection" >
      <div align="center">
        <SELECT name="" onchange="update_image1(this.options[selectedIndex].value);"> 
          <OPTION value="S_BAA1" selected="selected">A1</OPTION>
          <OPTION value="S_BAA2">A2</OPTION>
          <OPTION value="S_BAA3">A3</OPTION>
          <OPTION value="S_BAA4">A4</OPTION>
          <OPTION value="S_BAA5">A5</OPTION>
          <OPTION value="S_BAA6">A6</OPTION>
          <OPTION value="S_BAA7">A7</OPTION>
          <OPTION value="S_BAA8">A8</OPTION>
          <OPTION value="S_BAA9">A9</OPTION>
          <OPTION value="S_BAA10">A10</OPTION>
          <OPTION value="S_BAB1">B1</OPTION>
          <OPTION value="S_BAB2">B2</OPTION>
          <OPTION value="S_BAB3">B3</OPTION>
          <OPTION value="S_BAB4">B4</OPTION>
          <OPTION value="S_BAB5">B5</OPTION>
          <OPTION value="S_BAB6">B6</OPTION>
          <OPTION value="S_BAB7">B7</OPTION>
          <OPTION value="S_BAB8">B8</OPTION>
          <OPTION value="S_BAB9">B9</OPTION>
          <OPTION value="S_BAB10">B10</OPTION>
          <OPTION value="S_BAC1">C1</OPTION>
          <OPTION value="S_BAC2">C2</OPTION>
          <OPTION value="S_BAC3">C3</OPTION>
	  	  <OPTION value="S_BAC4">C4</OPTION>
          <OPTION value="S_BAC5">C5</OPTION>
          <OPTION value="S_BAC6">C6</OPTION>
          <OPTION value="S_BAC7">C7</OPTION>
          <OPTION value="S_BAC8">C8</OPTION>
          <OPTION value="S_BAC9">C9</OPTION>
	      <OPTION value="S_BAC10">C10</OPTION>
          <OPTION value="S_BAD1">D1</OPTION>
          <OPTION value="S_BAD2">D2</OPTION>
          <OPTION value="S_BAD3">D3</OPTION>
          <OPTION value="S_BAD4">D4</OPTION>
          <OPTION value="S_BAD5">D5</OPTION>
          <OPTION value="S_BAD6">D6</OPTION>
          <option value="S_BAD7">D7</OPTION>
          <OPTION value="S_BAD8">D8</OPTION>
          <OPTION value="S_BAD9">D9</OPTION>
          <OPTION value="S_BAD10">D10</OPTION>
          </SELECT>
      </div>
    </FORM></div></td>
    <td width="727">
		<div align="center">
			<img name="element1" src="./S_BAA1.JPG" width="450" height="180" alt="" />
		</div>
	</td>
  </tr>
  <tr>
    <td height="222"><div align="center"><FORM name="selection" >
      <div align="center">
        <SELECT name="" onchange="update_image2(this.options[selectedIndex].value);"> 
          <OPTION value="S_BAA1" selected="selected">A1</OPTION>
          <OPTION value="S_BAA2">A2</OPTION>
          <OPTION value="S_BAA3">A3</OPTION>
          <OPTION value="S_BAA4">A4</OPTION>
          <OPTION value="S_BAA5">A5</OPTION>
          <OPTION value="S_BAA6">A6</OPTION>
          <OPTION value="S_BAA7">A7</OPTION>
          <OPTION value="S_BAA8">A8</OPTION>
          <OPTION value="S_BAA9">A9</OPTION>
          <OPTION value="S_BAA10">A10</OPTION>
          <OPTION value="S_BAB1">B1</OPTION>
          <OPTION value="S_BAB2">B2</OPTION>
          <OPTION value="S_BAB3">B3</OPTION>
          <OPTION value="S_BAB4">B4</OPTION>
          <OPTION value="S_BAB5">B5</OPTION>
          <OPTION value="S_BAB6">B6</OPTION>
          <OPTION value="S_BAB7">B7</OPTION>
          <OPTION value="S_BAB8">B8</OPTION>
          <OPTION value="S_BAB9">B9</OPTION>
          <OPTION value="S_BAB10">B10</OPTION>
          <OPTION value="S_BAC1">C1</OPTION>
          <OPTION value="S_BAC2">C2</OPTION>
          <OPTION value="S_BAC3">C3</OPTION>
	  	  <OPTION value="S_BAC4">C4</OPTION>
          <OPTION value="S_BAC5">C5</OPTION>
          <OPTION value="S_BAC6">C6</OPTION>
          <OPTION value="S_BAC7">C7</OPTION>
          <OPTION value="S_BAC8">C8</OPTION>
          <OPTION value="S_BAC9">C9</OPTION>
	      <OPTION value="S_BAC10">C10</OPTION>
          <OPTION value="S_BAD1">D1</OPTION>
          <OPTION value="S_BAD2">D2</OPTION>
          <OPTION value="S_BAD3">D3</OPTION>
          <OPTION value="S_BAD4">D4</OPTION>
          <OPTION value="S_BAD5">D5</OPTION>
          <OPTION value="S_BAD6">D6</OPTION>
          <option value="S_BAD7">D7</OPTION>
          <OPTION value="S_BAD8">D8</OPTION>
          <OPTION value="S_BAD9">D9</OPTION>
          <OPTION value="S_BAD10">D10</OPTION>
          </SELECT>
      </div>
    </FORM></div></td>
    <td><div align="center"><img name="element2" src="./S_BAA1.JPG" width="450" height="180" alt="" /></div></td>
  </tr>
</table>
</body>
</html>

NB : j'ai vite codé ça et je n'y connais quasi rien au javascript, donc si qqn de plus experimenté pouvait faire passer le "element" en variable dans le "document.element1.src", histoire de ne pas faire une fonction par ligne.. J'ai essayé le code suivant mais ça foire.. ça doit être tout con mais bon :

Code HTML:

function update_image1(newimage, element)
{
	if (newimage == '')
	{
		document.element.src = "./A1.JPG";
	}
	else
	{
		document.element.src = "./" + newimage + ".JPG";
	}
}

**SuperTux** · 27/04/2008, 04h21

Salut,

document.element.src = "./A1.JPG";

Il faut enlever le "document.". Car "element" est déja une référence sur (par exemple) "document.element1".

**Bruno** · 27/04/2008, 04h50

Envoyé par SuperTux

Salut,
Il faut enlever le "document.". Car "element" est déja une référence sur (par exemple) "document.element1".

Ok merci.

Donc ça donne ceci :

Code HTML:

<!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>UNSS - Gymnastique Sportive</title>
<style type="text/css">
<!--
body {
	background-color: #e5a18e;
}
.Style1 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: large;
}
-->
</style></head>

<script language="javascript" type="text/javascript">
<!--
function update_image(newimage, element)
{
	if (newimage == '')
	{
		element.src = "./A1.JPG";
	}
	else
	{
		element.src = "./" + newimage + ".JPG";
	}
}
//-->
</script>

<body>

<table width="981" height="535" border="2" align="center" bordercolor="#FFFFFF">
  <tr>
    <td height="71"><div align="center" class="Style1">Choisir un élément</div></td>
    <td><div align="center" class="Style1">Image de l'élément</div></td>
  </tr>
  <tr>
    <td width="238" height="230"><div align="center"><FORM name="selection" >
      <div align="center">
        <SELECT name="" onchange="update_image(this.options[selectedIndex].value, element1);"> 
          <OPTION value="S_BAA1" selected="selected">A1</OPTION>
          <OPTION value="S_BAA2">A2</OPTION>
          <OPTION value="S_BAA3">A3</OPTION>
          <OPTION value="S_BAA4">A4</OPTION>
          <OPTION value="S_BAA5">A5</OPTION>
          <OPTION value="S_BAA6">A6</OPTION>
          <OPTION value="S_BAA7">A7</OPTION>
          <OPTION value="S_BAA8">A8</OPTION>
          <OPTION value="S_BAA9">A9</OPTION>
          <OPTION value="S_BAA10">A10</OPTION>
          <OPTION value="S_BAB1">B1</OPTION>
          <OPTION value="S_BAB2">B2</OPTION>
          <OPTION value="S_BAB3">B3</OPTION>
          <OPTION value="S_BAB4">B4</OPTION>
          <OPTION value="S_BAB5">B5</OPTION>
          <OPTION value="S_BAB6">B6</OPTION>
          <OPTION value="S_BAB7">B7</OPTION>
          <OPTION value="S_BAB8">B8</OPTION>
          <OPTION value="S_BAB9">B9</OPTION>
          <OPTION value="S_BAB10">B10</OPTION>
          <OPTION value="S_BAC1">C1</OPTION>
          <OPTION value="S_BAC2">C2</OPTION>
          <OPTION value="S_BAC3">C3</OPTION>
	  	  <OPTION value="S_BAC4">C4</OPTION>
          <OPTION value="S_BAC5">C5</OPTION>
          <OPTION value="S_BAC6">C6</OPTION>
          <OPTION value="S_BAC7">C7</OPTION>
          <OPTION value="S_BAC8">C8</OPTION>
          <OPTION value="S_BAC9">C9</OPTION>
	      <OPTION value="S_BAC10">C10</OPTION>
          <OPTION value="S_BAD1">D1</OPTION>
          <OPTION value="S_BAD2">D2</OPTION>
          <OPTION value="S_BAD3">D3</OPTION>
          <OPTION value="S_BAD4">D4</OPTION>
          <OPTION value="S_BAD5">D5</OPTION>
          <OPTION value="S_BAD6">D6</OPTION>
          <option value="S_BAD7">D7</OPTION>
          <OPTION value="S_BAD8">D8</OPTION>
          <OPTION value="S_BAD9">D9</OPTION>
          <OPTION value="S_BAD10">D10</OPTION>
          </SELECT>
      </div>
    </FORM></div></td>
    <td width="727">
		<div align="center">
			<img name="element1" src="./S_BAA1.JPG" width="450" height="180" alt="" />
		</div>
	</td>
  </tr>
  <tr>
    <td height="222"><div align="center"><FORM name="selection" >
      <div align="center">
        <SELECT name="" onchange="update_image(this.options[selectedIndex].value, element2);"> 
          <OPTION value="S_BAA1" selected="selected">A1</OPTION>
          <OPTION value="S_BAA2">A2</OPTION>
          <OPTION value="S_BAA3">A3</OPTION>
          <OPTION value="S_BAA4">A4</OPTION>
          <OPTION value="S_BAA5">A5</OPTION>
          <OPTION value="S_BAA6">A6</OPTION>
          <OPTION value="S_BAA7">A7</OPTION>
          <OPTION value="S_BAA8">A8</OPTION>
          <OPTION value="S_BAA9">A9</OPTION>
          <OPTION value="S_BAA10">A10</OPTION>
          <OPTION value="S_BAB1">B1</OPTION>
          <OPTION value="S_BAB2">B2</OPTION>
          <OPTION value="S_BAB3">B3</OPTION>
          <OPTION value="S_BAB4">B4</OPTION>
          <OPTION value="S_BAB5">B5</OPTION>
          <OPTION value="S_BAB6">B6</OPTION>
          <OPTION value="S_BAB7">B7</OPTION>
          <OPTION value="S_BAB8">B8</OPTION>
          <OPTION value="S_BAB9">B9</OPTION>
          <OPTION value="S_BAB10">B10</OPTION>
          <OPTION value="S_BAC1">C1</OPTION>
          <OPTION value="S_BAC2">C2</OPTION>
          <OPTION value="S_BAC3">C3</OPTION>
	  	  <OPTION value="S_BAC4">C4</OPTION>
          <OPTION value="S_BAC5">C5</OPTION>
          <OPTION value="S_BAC6">C6</OPTION>
          <OPTION value="S_BAC7">C7</OPTION>
          <OPTION value="S_BAC8">C8</OPTION>
          <OPTION value="S_BAC9">C9</OPTION>
	      <OPTION value="S_BAC10">C10</OPTION>
          <OPTION value="S_BAD1">D1</OPTION>
          <OPTION value="S_BAD2">D2</OPTION>
          <OPTION value="S_BAD3">D3</OPTION>
          <OPTION value="S_BAD4">D4</OPTION>
          <OPTION value="S_BAD5">D5</OPTION>
          <OPTION value="S_BAD6">D6</OPTION>
          <option value="S_BAD7">D7</OPTION>
          <OPTION value="S_BAD8">D8</OPTION>
          <OPTION value="S_BAD9">D9</OPTION>
          <OPTION value="S_BAD10">D10</OPTION>
          </SELECT>
      </div>
    </FORM></div></td>
    <td>
		<div align="center">
			<img name="element2" src="./S_BAA1.JPG" width="450" height="180" alt="" />
		</div>
	</td>
  </tr>
</table>
</body>

</html>

JPhL · 27/04/2008, 10h43

Vraiment un grand merci ! Je me doutais que le html aurait ses limites dans ce genre de chose et que le php serait la solution... Mais pour l'instant, le php est un mystère pour moi...

Encore merci !

JPhL · 28/04/2008, 11h47

Post annulé... Solution trouvée... ;°)

JPhL · 28/04/2008, 22h53

Voici ce que j'ai fait... Bon, il manque les images survolées du 1er tableau.

asymetriques.zip

Une question : à chaque dessin correspond une vidéo au format flv, mais que je peux convertir en avi, voire en gif animé...

Est-il possible, en fonction donc du choix des élèves, que dessous les élèments qu'ils ont choisis, apparaisse une vidéo ou une animation (en cas de gif animé) avec les film de chacun des élèments choisis qui s'enchaînent ?

Merci encore pour votre aide...

JPhL · 02/05/2008, 22h33

Bonsoir à tous

mon pb : je voudrais dans un tableau pouvoir ouvrir deux images survolées de tailles différentes. En fin de compte, l'image ouverte au survol étant l'agrandissement de l'image initiale, pour une meilleure lisibilité.

Comment faire pour que la cellule contenant l'image initiale s'agrandisse au survol et reprenne sa taille initiale en suite ? Pour l'instant, c'est l'image qui apparaît au survol qui se réduit...

Je mets le fichier au téléchargement pour être plus clair dans mes explications...

asymetriques_1.zip

Merci d'avance pour votre aide.

JP

**JPL** · 02/05/2008, 23h15

Discussions fusionnées.

Appeler photos et vidéos sur programme html

Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

Re : Appeler photos et vidéos sur programme html

images survolées de tailles différentes

Re : Appeler photos et vidéos sur programme html

Discussions similaires

besoin d'un programme qui modifie les photos

programme html problème de taille avec fieldset

comment appeler une fonction ecrite en C++ sur Matlab