script visioneuse parametrage

script visioneuse parametrage - HTML/CSS - Programmation

Marsh Posté le 15-12-2004 à 11:26:27    

Bjr,
 
j'ai essayé d'installer un script qui fait un visioneuse sur ma page, c'est parfait, toutefois je ne vois pas dans le script comment centrer horizontalement et descendre cette visioneuse ou bon me semble. n petit coup de main serait aimable. merci

Reply

Marsh Posté le 15-12-2004 à 11:26:27   

Reply

Marsh Posté le 15-12-2004 à 11:32:55    

Si ta visionneuse est dans un <div> tu peux la déplacer où tu veux via les attributs CSS du div

Reply

Marsh Posté le 15-12-2004 à 11:38:50    

pfff jai oublié le script:
 
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
 
<SCRIPT LANGUAGE="JavaScript">
var rotate_delay = 5000;
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop" ) ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop" ) {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->
</script>
 
<form name=slideform>
</head>
 
<body background="images/fond%20logo%20final%20test.jpg">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<blockquote>
<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn.js"></SCRIPT>
</form>
<p>&nbsp;</p>
 <p>&nbsp;</p>
</blockquote>
<table cellspacing=1 cellpadding=4 bgcolor="#c79938" height="320">
<tr>
<td align=center bgcolor="#c79938" height="21">
<u><b><font color="#000000">Centre de visionnage</font></b></u>
</td>
</tr>
<tr>
<td align=center bgcolor="#c79938" width=200 height=190>
<p align="center">
<img src="images/devise.jpg" name="show">
</p>
</td>
</tr>
<tr>
<td align=center bgcolor="#c79938" height="25">
<select name="slide" onChange="change();">
<option value="images/devise.jpg" selected>Notre devise
<option value="images/produits1.jpg">image1
<option value="images/produits2.jpg">image2
<option value="images/produits3.jpg">image3
<option value="images/produits4.jpg">image4
<option value="images/produits5.jpg">image5
<option value="images/produits6.jpg">image6
<option value="images/produits7.jpg">image7
 
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#c79938" height="44">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</body>
 
</html>

Reply

Marsh Posté le 15-12-2004 à 13:46:24    

je ne vois pas de visioneuse dans <div>
une astuce svp? parce que ca reste en haut et c'est po beau ... :(

Reply

Marsh Posté le 15-12-2004 à 14:05:03    

Tiens, voilà la solution, t'as juste à rajouter ton script :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
  3. <head>
  4.  <title>Visionneuse</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.  <style type="text/css" media="screen">
  7.   html, body {
  8.    height: 100%;
  9.    margin: 0px;
  10.    padding: 0px;
  11.    width: 100%;
  12.   }
  13.   #visionneuse {
  14.    background-color: #c79938;
  15.    height: 320px;
  16.    left: 50%;
  17.    margin: -160px 0px 0px -110px;
  18.    position: absolute;
  19.    text-align: center;
  20.    top: 50%;
  21.    width: 220px;
  22.   }
  23.   h1 {
  24.    font-family: "Times New Roman", sans-serif;
  25.    font-size: 15px;
  26.    margin-top: 10px;
  27.    text-decoration: underline;
  28.   }
  29.   #image {
  30.    height: 190px;
  31.    line-height: 190px;
  32.    margin: 0px auto;
  33.    width: 200px;
  34.   }
  35.   #slideform select {
  36.    display: block;
  37.    margin: 10px auto;
  38.   }
  39.  </style>
  40. </head>
  41. <body>
  42.  <div id="visionneuse">
  43.   <h1>Centre de Visionnage</h1>
  44.   <div id="image"><img src="images/devise.jpg" id="show" alt="" /></div>
  45.   <form id="slideform" action="#">
  46.    <div>
  47.     <select id="slide" onchange="change();">
  48.      <option value="images/devise.jpg" selected="selected">Notre devise</option>
  49.      <option value="images/produits1.jpg">image1</option>
  50.      <option value="images/produits2.jpg">image2</option>
  51.      <option value="images/produits3.jpg">image3</option>
  52.      <option value="images/produits4.jpg">image4</option>
  53.      <option value="images/produits5.jpg">image5</option>
  54.      <option value="images/produits6.jpg">image6</option>
  55.      <option value="images/produits7.jpg">image7</option>
  56.     </select>
  57.     <input type="button" onclick="first();" value="|<<" title="Beginning" />
  58.     <input type="button" onclick="previous();" value="<<" title="Previous" />
  59.     <input type="button" id="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay" />
  60.     <input type="button" onclick="next();" value=">>" title="Next" />
  61.     <input type="button" onclick="last();" value=">>|" title="End" />
  62.    </div>
  63.   </form>
  64.  </div>
  65. </body>
  66. </html>


Message édité par FlorentG le 15-12-2004 à 14:06:13
Reply

Marsh Posté le 15-12-2004 à 14:25:45    

merci florent. le tout est que j'essaie de comprendre et pas betement copié collé ....

Reply

Marsh Posté le 15-12-2004 à 14:33:04    

j'ai une erreur de script en testant ton code florent :(

Reply

Marsh Posté le 15-12-2004 à 14:35:58    

Peut-être quand j'ai modifié, les 'name' en les remplaçant par des id. Je regarde vite-fait et je t'envoi le truc final :)

Reply

Marsh Posté le 15-12-2004 à 14:39:59    

super :)

Reply

Marsh Posté le 15-12-2004 à 14:50:09    

Voilà le truc (désolé pour la longueur). Y'aurai moyen d'optimiser, mais là ch'uis au boulot, donc ça l'fait pas  :D  
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
  3. <head>
  4.  <title>Visionneuse</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.  <style type="text/css" media="screen">
  7.   html, body {
  8.    height: 100%;
  9.    margin: 0px;
  10.    padding: 0px;
  11.    width: 100%;
  12.   }
  13.   #visionneuse {
  14.    background-color: #c79938;
  15.    height: 320px;
  16.    left: 50%;
  17.    margin: -160px 0px 0px -110px;
  18.    position: absolute;
  19.    text-align: center;
  20.    top: 50%;
  21.    width: 220px;
  22.   }
  23.   h1 {
  24.    font-family: "Times New Roman", sans-serif;
  25.    font-size: 15px;
  26.    margin-top: 10px;
  27.    text-decoration: underline;
  28.   }
  29.   #image {
  30.    height: 190px;
  31.    line-height: 190px;
  32.    margin: 0px auto;
  33.    width: 200px;
  34.   }
  35.   #slideform select {
  36.    display: block;
  37.    margin: 10px auto;
  38.   }
  39.  </style>
  40.  <script type="text/javascript">
  41.   <!--
  42.   var rotate_delay = 5000;
  43.   var current = 0;
  44.   var slide;
  46.   function next() {
  48.    if (slide[current+1]) {
  49.     setSlide(current+1);
  50.     slide.selectedIndex = ++current;
  51.     } else first();
  52.   }
  53.   function previous() {
  55.    if (current-1 >= 0) {
  56.     setSlide(current-1);
  57.     slide.selectedIndex = --current;
  58.    } else last();
  59.   }
  60.   function first() {
  61.    current = 0;
  62.    setSlide(0);
  63.    slide.selectedIndex = 0;
  64.   }
  65.   function last() {
  66.    current = slide.length-1;
  67.    setSlide(current);
  68.    slide.selectedIndex = current;
  69.   }
  70.   function ap(text) {
  71.    document.getElementById('slidebutton').value = (text == "Stop" ) ? "Start" : "Stop";
  72.    rotate();
  73.   }
  74.   function change() {
  75.    current = slide.selectedIndex;
  76.    setSlide(current);
  77.   }
  78.   function rotate() {
  79.    if (document.getElementById('slidebutton').value == "Stop" ) {
  80.     current = (current == slide.length-1) ? 0 : current+1;
  81.     setSlide(current);
  82.     slide.selectedIndex = current;
  83.     window.setTimeout("rotate()", rotate_delay);
  84.     }
  85.   }
  87.   function setSlide(index) {
  88.    document.images.show.src = slide[index].value;
  89.   }
  91.   //  End -->
  92.  </script>
  93. </head>
  94. <body>
  95.  <div id="visionneuse">
  96.   <h1>Centre de Visionnage</h1>
  97.   <div id="image"><img src="images/devise.jpg" id="show" alt="" /></div>
  98.   <form id="slideform" action="#">
  99.    <div>
  100.     <select id="slide" onchange="javascript:change();">
  101.      <option value="images/devise.jpg" selected="selected">Notre devise</option>
  102.      <option value="images/produits1.jpg">image1</option>
  103.      <option value="images/produits2.jpg">image2</option>
  104.      <option value="images/produits3.jpg">image3</option>
  105.      <option value="images/produits4.jpg">image4</option>
  106.      <option value="images/produits5.jpg">image5</option>
  107.      <option value="images/produits6.jpg">image6</option>
  108.      <option value="images/produits7.jpg">image7</option>
  109.     </select>
  110.     <input type="button" onclick="first();" value="|<<" title="Beginning" />
  111.     <input type="button" onclick="previous();" value="<<" title="Previous" />
  112.     <input type="button" id="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay" />
  113.     <input type="button" onclick="next();" value=">>" title="Next" />
  114.     <input type="button" onclick="last();" value=">>|" title="End" />
  115.    </div>
  116.    <script type="text/javascript">
  117.     slide = document.getElementById('slide');
  118.    </script>
  119.   </form>
  120.  </div>
  121. </body>
  122. </html>

Reply

Marsh Posté le 15-12-2004 à 14:50:09   

Reply

Marsh Posté le 15-12-2004 à 18:14:24    

genial ton aide florent, merci encore !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed