Bonjour à tous,

Je tente de développer une application video simple pour mon site web. le but étant pour mes utilisateurs de sélectionner la video qu'ils désirent et que cette dernière vienne s'afficher dans un lecteur central, sans que la page n'est à se recharger. J'utilise pour cela une combinaison d'un formulaire HTML, d'une page js et d'une page PHP côté serveur. Voici mes codes sources :

Code Html

CODE
<table height="300px" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td width="461px"><div>
      <div><span id="capitale" class="superposition"></span>
        
        <center>
        </center></div>
    </div></td>
    <td width="200px"><script language="javascript" src="presentation.js"></script>
<form name="f">
  <fieldset>

    <legend>Video</legend>
    <label for="something">choisissez votre video</label>
    <select id="something" name="bundesland" onClick="envReq()">
<option>Video A</option>
      <option>Video B</option>
      <option>Video C</option>
      <option>Video D</option>
    </select>

  </fieldset>
</form>


Code JS

CODE
var objRequete;
if(navigator.appName.search("Microsoft") > -1){
    //objRequete = new ActiveXObject("Microsoft.XMLHTTP");
    objRequete = new ActiveXObject("MSXML2.XMLHTTP");
}
else{
    objRequete = new XMLHttpRequest();
}
function envReq() {
    for(i=1;i<=5;i++){
        if (this.document.f.bundesland.options[i-1].selected){
            objRequete.open('get', 'presentation.php?ou='+i,true);
            objRequete.onreadystatechange = traiteReponse;
            objRequete.send(null);
            break;
        }
    }
}
function traiteReponse() {
    if(objRequete.readyState == 4){
        document.getElementById("capitale").innerHTML =
        objRequete.responseText;
    }
}


Code PHP

CODE
<?
    switch ($_REQUEST['ou']) {
    case 1: include("video_asso.html"); break;
    case 2: include("video_soiree_a.html"); break;
    case 3: include("video_soiree_b.html"); break;
    case 4: include("video_soiree_c.html"); break;
    case 5: include("video_soiree_d.html");
    }
    ?>


Ce trio fonctionne très bien (même si je suppose que ce n'est pas l'ideal en matière de développement, je fais avec car je suis novice). Jusque la donc aucun soucis.
Pour des questions d'esthétisme, je souhaite modifier l'apparence de mon formulaire de sélection de video. J'ai trouvé un code JS et une mise en forme CSS à l'adresse suivante http://old.easy-designs.net/articles/replaceSelect/.

Code CSS :

CODE
input {
      display: block;
      margin: 0 0 10px;
      border: 1px solid #666;
      color: #999;
    }
    legend {
      font-size: 1.2em;
      font-weight: bold;
    }
    label {
      display: block;
      font-weight: bold;
      color: #666;
    }
    select {
      display: block;
      width: 300px;
    }
    select.replaced {
      display: none;
    }
    ul.selectReplacement {
      background: url(index/top.jpg) top left no-repeat;
      margin: 0;
      padding: 0;
      height: 1.65em;
      width: 300px;
    }
    ul.selectReplacement li {
      background: #cf5a5a;
      color: #fff;
      cursor: pointer;
      display: none;
      font-size: 11px;
      line-height: 1.7em;
      list-style: none;
      margin: 0;
      padding: 1px 12px;
      width: 276px;
    }
    ul.selectOpen li {
      display: block;
    }
    ul.selectReplacement li.selected {
      background: url(index/bottom.gif) bottom left no-repeat;
      color: #fff;
      display: block;
    }
    ul.selectOpen li.selected {
      background: #9e0000;
      display: block;
    }
    ul.selectOpen li:hover,
    ul.selectOpen li.hover,
    ul.selectOpen li.selected:hover {
      background: #9e0000;
      color: #fff;
    }


Code JS :

CODE
<script type="text/javascript">
    // <![CDATA[
    function selectReplacement(obj) {
      obj.className += ' replaced';
      var ul = document.createElement('ul');
      ul.className = 'selectReplacement';
      var opts = obj.options;
      for (var i=0; i<opts.length; i++) {
        var selectedOpt;
        if (opts[i].selected) {
          selectedOpt = i;
          break;
        } else {
          selectedOpt = 0;
        }
      }
      for (var i=0; i<opts.length; i++) {
        var li = document.createElement('li');
        var txt = document.createTextNode(opts[i].text);
        li.appendChild(txt);
        li.selIndex = opts[i].index;
        li.selectID = obj.id;
        li.onclick = function() {
          selectMe(this);
        }
        if (i == selectedOpt) {
          li.className = 'selected';
          li.onclick = function() {
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            }
          }
        }
        if (window.attachEvent) {
          li.onmouseover = function() {
            this.className += ' hover';
          }
          li.onmouseout = function() {
            this.className =
              this.className.replace(new RegExp(" hover\\b"), '');
          }
        }
        ul.appendChild(li);
      }
      obj.parentNode.insertBefore(ul,obj);
    }
    function selectMe(obj) {
      var lis = obj.parentNode.getElementsByTagName('li');
      for (var i=0; i<lis.length; i++) {
        if (lis[i] != obj) {
          lis[i].className='';
          lis[i].onclick = function() {
            selectMe(this);
          }
        } else {
          setVal(obj.selectID, obj.selIndex);
          obj.className='selected';
          obj.parentNode.className =
            obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
          obj.onclick = function() {
            obj.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            }
          }
        }
      }
    }
    function setVal(objID, selIndex) {
      var obj = document.getElementById(objID);
      obj.selectedIndex = selIndex;
    }
    function setForm() {
      var s = document.getElementsByTagName('select');
      for (var i=0; i<s.length; i++) {
        selectReplacement(s[i]);
      }
    }
    window.onload = function() {
      (document.all && !window.print) ? null : setForm();
    }
    // ]]>
  </script>



Mon problème est qu'en fait les deux codes ne sont pas interprété ensembles et que j'ai soit la mise en forme du formulaire soit la possibilité de changer la video. Je ne connais pas grand chose en JavaScript et j'aurais voulu savoir comment faire pour que les deux effets escomptés soient possible en même temps (c-a-d la mise en forme du formulaire et l'interprétation du code Js permettant de "switcher" les videos).

Comme vous avez pu le remarquer, je fais appel dans mon code HTML à un fichier .js externe nommé presentation.js où j'ai regroupé les deux codes...

Je voulais donc savoir s'il existait un moyen pour obtenir ces deux effets.

Merci d'avance,