Appeler photos et vidéos sur programme html
Répondre à la discussion
Affichage des résultats 1 à 12 sur 12

Appeler photos et vidéos sur programme html



  1. 26/04/2008, 19h50 #1
    JPhL

    Appeler photos et vidéos sur programme html


    ------

    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.

    -----
  2. 26/04/2008, 20h50 #2
    JPhL

    Re : Appeler photos et vidéos sur programme html

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

    videos gym
  3. 26/04/2008, 21h35 #3
    JPhL

    Re : Appeler photos et vidéos sur programme html

    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
  4. 27/04/2008, 01h19 #4
    Bruno

    Re : Appeler photos et vidéos sur programme html

    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.
  5. Aujourd'hui
    A voir en vidéo sur Futura
  6. 27/04/2008, 01h59 #5
    Bruno

    Re : Appeler photos et vidéos sur programme html

    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";
	}
}
  7. 27/04/2008, 03h21 #6
    SuperTux

    Re : Appeler photos et vidéos sur programme html

    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".
  8. 27/04/2008, 03h50 #7
    Bruno

    Re : Appeler photos et vidéos sur programme html

    Citation Envoyé par SuperTux Voir le message
    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>
  9. 27/04/2008, 09h43 #8
    JPhL

    Re : Appeler photos et vidéos sur programme html

    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 !
  10. 28/04/2008, 10h47 #9
    JPhL

    Re : Appeler photos et vidéos sur programme html

    Post annulé... Solution trouvée... ;°)
  11. 28/04/2008, 21h53 #10
    JPhL

    Re : Appeler photos et vidéos sur programme html

    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...
  12. 02/05/2008, 21h33 #11
    JPhL

    images survolées de tailles différentes

    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
  13. 02/05/2008, 22h15 #12
    JPL
    Responsable des forums

    Re : Appeler photos et vidéos sur programme html

    Discussions fusionnées.
    Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
« Fournisseur Internet Alice | comment changer le mot de passe?? »

Discussions similaires

  1. besoin d'un programme qui modifie les photos
    Par inviteac8a4e72 dans le forum Logiciel - Software - Open Source
    Réponses: 4
    Dernier message: 29/06/2007, 12h51
  2. programme html problème de taille avec fieldset
    Par invite81784151 dans le forum Internet - Réseau - Sécurité générale
    Réponses: 0
    Dernier message: 28/04/2006, 08h52
  3. comment appeler une fonction ecrite en C++ sur Matlab
    Par invite5c0c3007 dans le forum Logiciel - Software - Open Source
    Réponses: 3
    Dernier message: 17/06/2005, 14h35
Découvrez nos comparatifs produits sur l'informatique et les technologies.