Diaporama

Commenter

Contenu du snippet

Un diaporama simple en DHTML (pour tous les navigateurs. NEDELEG LAOUEN DEOC'H TUD ! (JOYEUX NOEL A TOUS !)

Source / Exemple : 


<html><head>
<style type="text/css"><!--
    .class1{position:relative; width:100px; top:0px; height:500px; overflow-y:scroll; overflow:-moz-scrollbars-vertical};
    .class2{width:670px; background-color:honeydew; color:darkgreen};
--></style>
<script language="JavaScript"><!--
//--------------------------------DHTML-------------------
var nn4 = document.layers;
var nn6 = document.getElementById && !document.all;
var nn = nn4 || nn6;
var ie = document.all && !nn;
var dhtml = document.getElementById || document.all || document.layers;
function js_object(myRef) {
   if (!dhtml) {return;}
   if (nn6) {myRef = document.getElementById(myRef);}
   else if (nn4) {myRef = document.layers[myRef];}
   else {myRef = document.all[myRef];}
   return(myRef);}
function js_write(myRef, msg) {
  if (nn4) {
      js_object(myRef).document.write(msg);
      js_object(myRef).document.close();}
  else {
      js_object(myRef).innerHTML = msg;}
}
//--------------------------------DIAPORAMA-------------
var pics= new Array("eire10.jpg","eire11.jpg","eire12.jpg","eire13.jpg","eire14.jpg","eire15.jpg","eire16.jpg","eire17.jpg","eire18.jpg","eire19.jpg");
var legends= new Array(" Slieve League cliffs"," Holy Well"," The Poulnabrone wedge tomb"," Sheeps grazing on the road"," Rock of Cashel"," Trail in Ireland"," Poulnabrone tomb"," Great sunset"," Sunset on the coast"," Beach at Trabane Strand");
//.....................
//(document.images[0] ..........as main picture for our diaporama)
var count= -1;
var num= pics.length;
//.....................
function set_thumbnails() {
   document.write("<div id='slideshow' class='class1'>");
   for (i=0; i<num; i++) {
         document.write("<img src='"+pics[i] +"' width=100px onclick='actualize("+i+")'><p>");}
   document.write("</div>");}
//.....................
function actualize(k) {
   count = k;
   document.images[0].src= pics[count];
   js_write('div2',legends[count]);} 
//.....................
function previous(form) {
   count += -1;
   if (count <0) {count= 0;}
   document.images[0].src= pics[count];  
   js_write('div2',legends[count]);}    
//.....................
function next(form) {
   count += 1;
   if (count > (num-1)) {count= 0;}
   document.images[0].src= pics[count];  
   js_write('div2',legends[count]);} 
--></script></head>
<body>
<font color=darkgreen><font size=2><p>
Free Dhtml script provided by ©2004-<a href="http://gilles.saunier.free.fr">VB'Breizh</a><hr><p>
<center><font color=darkgreen><font size=4>IRISH TRIP<p><font size=2><font color=black><p>
<form style='cursor:pointer'><table border style='background-color:azure'>
    <tr><td height='500' width='670' colspan='2' align="center"><img src='pix.gif' border=0></td>
          <td  height='500' colspan='2' width='100'><script>set_thumbnails()</script></td></tr>
    <tr><td  colspan='2' align=left><div id='div2' class='class2'></div></td>
          <td align=left><input type='button' value='  <<  ' onclick='previous(this.form)'></td>
          <td align=right><input type='button' value='  >>  ' onclick='next(this.form)'></td></tr>
</table></form></center>
<font size=2><p>
A lot of thanks to <a href ="http://www.pdphoto.org">pdphoto.org</a> for these fabulous photographs.
<body onload='actualize(0)'>
</body></html>

Conclusion :


Impossible de passer le zip à cause du poids des images jpg...
Démo sur le site de VB'Breizh (http://gilles.saunier.free.fr)

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (vbbreizh)