|
19-07-2008 |
Diaporama javascript avec liens et commentaires
Voici
un diaporama en javascriptm
sur lequel vous pouvez mettre des liens
et des commentaires sous les images
Le code javascript :
<script type="text/javascript">
nb_photo_ligne = 4;
numero_photo = 1;
vignet = new Array;
des = new Array;
big = new Array;
var HazMess=new Array();
des[0]= 'Soignez vous
<A HREF="#">Contre le mal de dos</A> !'
vignet[0]= 's10.jpg'
big[0]= '10.jpg'
des[1]= 'Matériel de l\'Etat
<A HREF="#">mal en point</A> !'
vignet[1]= 's11.jpg'
big[1]= '11.jpg'
des[2]= 'Oeuf qui roule
<A HREF="#">n\'émousse pas l\'équilibre</A>.'
vignet[2]= 's12.jpg'
big[2]= '12.jpg'
des[3]= 'Une bonne douche rapide ou
<A HREF="#">un nettroyage moto ?</A>.'
vignet[3]= 's13.jpg'
big[3]= '13.jpg'
des[4]= 'Le repos du guerrier ou,
<A HREF="#">où vont nos sous</A> !'
vignet[4]= 's14.jpg'
big[4]= '14.jpg'
des[5]= 'Vient poupoule, vient poupoule
<A HREF="#">la moto qui a la cot cot </A>.'
vignet[5]= 's15.jpg'
big[5]= '15.jpg'
des[6]= 'Rien ne sert de courir
<A HREF="#">il faut bouffer du tigre</A>.'
vignet[6]= 's16.jpg'
big[6]= '16.jpg'
des[7]= '<A HREF="#">Z\'auriez pas du feu</A>?'
vignet[7]= 's17.jpg'
big[7]= '17.jpg'
function ChageImage(num)
{
if(document.getElementById)
document.getElementById("dyn_img").innerHTML
= '<A HREF="javascript:killImage()">
<IMG SRC="'+big[num]+'" BORDER=0 HSPACE=5
VSPACE=5 ALT="Cliquez ici pour faire disparaitre">
</A>
<BR>
<FONT FACE="Verdana, Arial" SIZE=3
color="#FF6600">'+des[num]+'</FONT>';
else
window.open(big[num],"_blank")
}
function killImage(num)
{
if(document.getElementById)
document.getElementById("dyn_img").innerHTML = "";
}
document.write('<table align=center>')
for(a=0;a<big.length;a++)
{
if(numero_photo == 1)
document.write('<TR>');
if(numero_photo == big.length)
document.write('<TD ALIGN=center COLSPAN
='+(((big.length)+1)-numero_photo)+'>');
else
document.write('<TD ALIGN=center>');
document.write('<A HREF="javascript:ChageImage('+a+')">
<IMG SRC="'+vignet[a]+'" HSPACE=5 VSPACE=5
ALT="Cliquez ici pour voir en grand" BORDER=0>
</A>
</TD>')
if(numero_photo == nb_photo_ligne)
{
document.write('</TR>');
numero_photo=0;
}
numero_photo++;
}
document.write('<TR>
<TD COLSPAN='+big.length+' ALIGN=center>
<DIV ID=dyn_img>
</DIV>
</TD>
</TR>
</TABLE>');
window.onload=ChageImage(7);
</SCRIPT>
|
Les réglages possibles :
- nb_photo_ligne = 4;: le nombre de photos que vous voulez par ligne
- des[0]= 'Soignez vous <A HREF="#">Contre le mal de dos</A> !' : descriptif avec un lien href
- vignet[0]= 's10.jpg' : votre vignette
- big[0]= '10.jpg' : l'image taille réelle
correspondante
- [0] : C'est la première "cellule"
du tableau qui comprends les trois paramètres décrits au dessus,
autant de triolets que d'images.
-
ALT="Cliquez ici pour faire disparaitre": Texte qui apparaît au survol de l'image
- <FONT FACE="Verdana, Arial" SIZE=3 color="#FF6600"> : Configuration de vos polices de caractère.
-
document.write('<table align=center>')
:Pour positionner votre tableau dans la page.
- window.onload=ChageImage(7); : Pour lancer une
image par défaut au lancement du script, son numéro dans les cellules.
Citez cet article
|
- Les messages comportant des attaques verbales contre les personnes seront supprimés.
- Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
- Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
|
Powered by AkoComment Tweaked Special Edition v.1.4.6 AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com All right reserved |