ajouter un diaporama images miniatures code javascript

obtenir ces boutons

Créer son diaporama : 5° partie

L'utilisation de ce code est expliquée sur cette page.

Il permet de créer le diaporama qui figure comme EXEMPLE 4 sur cette page.

Code : coller les instructions suivantes dans un gadget HTML/JavaScript ou une "page statique" de Blogger :

<style type="text/css">
#dia4affichage_titre{display:none;color:#ccc;margin: 0;padding:0;background:transparent;width:96.4%;}
.dia4aff-im-princ{ width: 96.4%;background:transparent;border:solid #ccc 1px;}
#dia4affichage_legendes{display:none;color:#ccc;margin: 0;padding:0;background:transparent;width:96.4%;}
#dia4affichage_numero{display:inline;color:#ccc;right:20px;}
.dia4miniatures{display:inline;margin:10px 0.5% 0px 0.5%;padding: 0;border:solid #ccc 1px;width:11.01%;font-family:arial;background:#ccc;cursor:pointer;}
.dia4onglets{display:inline;margin:0px;border:solid #ccc 1px;width:4%;font-family:arial;background:#222;color:#ddd;cursor:pointer;}
body{background:#333;}
.dia4boutons{display:inline;margin:16px 5px 0px 5px;padding: 0;border-top:solid #ccc 1px;border-left:solid #ccc 1px;width:10px;height:10px;font-family:arial;background:#000;cursor:pointer;}
</style><script language="JavaScript">

var dia4Image = new Array();

dia4Image[0] = 'http://3.bp.blogspot.com/-AKf5hkjNdn8/T0OmQnLvkBI/AAAAAAAABIU/wO7F9cv8UIc/s1600/ny1.JPG';
dia4Image[1] = 'http://1.bp.blogspot.com/-4aRhi2PTVto/T0OmXZBO8LI/AAAAAAAABIg/_v-bCPGYzLk/s1600/ny2.JPG';
dia4Image[2] = 'http://4.bp.blogspot.com/-GrF5Al2aUB8/T0OmawfjHOI/AAAAAAAABIs/sX54KsU_OcE/s1600/ny3.JPG';
dia4Image[3] = 'http://3.bp.blogspot.com/-pNFDuIbBPCc/T0OmfTqQEnI/AAAAAAAABI4/Kv5B6aAO4Wo/s1600/ny4.JPG';
dia4Image[4] = 'http://2.bp.blogspot.com/-5MTeZzN4pQM/T0OmnbX7WMI/AAAAAAAABJE/WdpLS11XUHI/s1600/ny5.JPG';
dia4Image[5] = 'http://1.bp.blogspot.com/-O_4X_1MvD-M/T0OmsV5SK-I/AAAAAAAABJQ/n5LIQM49z3k/s1600/ny6.JPG';
dia4Image[6] = 'http://2.bp.blogspot.com/-vNG_l4UG2Dk/T0OmxZB_aII/AAAAAAAABJc/aeLDGuDoaqE/s1600/ny7.JPG';
dia4Image[7] = 'http://4.bp.blogspot.com/-WvaqDGC-SeQ/T0Om2N66SdI/AAAAAAAABJo/J8QBLv-avz4/s1600/ny8.JPG';
dia4Image[8] = 'http://2.bp.blogspot.com/-l70BsD24bXA/T0Om7uSCuUI/AAAAAAAABJ0/ZXXtlkJ_lVI/s1600/ny9.JPG';
dia4Image[9] = 'http://1.bp.blogspot.com/-weCI_pstlrk/T0OnAjslAcI/AAAAAAAABKA/1vbEfErEVfM/s1600/ny10.JPG';
dia4Image[10] = 'http://1.bp.blogspot.com/-DgYQ-sEOuak/T0OnHXH2c3I/AAAAAAAABKM/Ff4fNRkWgcw/s1600/ny11.JPG';
dia4Image[11] = 'http://1.bp.blogspot.com/-QsM8vnrWVDw/T0OnLSwaDHI/AAAAAAAABKY/Uih4j73qN_0/s1600/ny12.JPG';
dia4Image[12] = 'http://2.bp.blogspot.com/-I34QQFpLNFQ/T0OnPTOHMBI/AAAAAAAABKk/SuI6ESX8b3g/s1600/ny13.JPG';
dia4Image[13] = 'http://3.bp.blogspot.com/-ILrwQ5xe7yw/T0OnUEDdKQI/AAAAAAAABKw/SShw2Yl-e6I/s1600/ny14.JPG';
dia4Image[14] = 'http://3.bp.blogspot.com/-Lrr_ihZmO6U/T0OnZGqVAdI/AAAAAAAABK8/ciGi_Nn3RiY/s1600/ny15.JPG';
dia4Image[15] = 'http://3.bp.blogspot.com/-Fwoqk3rebeY/T0OnekWv7FI/AAAAAAAABLI/H1XcxZtcZIY/s1600/ny16.JPG';
dia4Image[16] = 'http://2.bp.blogspot.com/-UnZkSK83AJo/T0OniHWgctI/AAAAAAAABLU/YnR6SZYaAk4/s1600/ny17.JPG';
dia4Image[17] = 'http://1.bp.blogspot.com/-K6EUZGfl3V0/T0OnpC33MaI/AAAAAAAABLg/wikDVw7fqAA/s1600/ny18.JPG';
dia4Image[18] = 'http://2.bp.blogspot.com/-SV2_2p4XNFY/T0Onu2jxj8I/AAAAAAAABLs/b64z46c94xw/s1600/ny19.JPG';
dia4Image[19] = 'http://4.bp.blogspot.com/-3tN2Els9wII/T0On1DDyl_I/AAAAAAAABL4/2olR54N61tE/s1600/ny20.JPG';

var dia4ImageMini = new Array();

dia4ImageMini[0] = 'http://3.bp.blogspot.com/-AKf5hkjNdn8/T0OmQnLvkBI/AAAAAAAABIU/wO7F9cv8UIc/s200/ny1.JPG';
dia4ImageMini[1] = 'http://1.bp.blogspot.com/-4aRhi2PTVto/T0OmXZBO8LI/AAAAAAAABIg/_v-bCPGYzLk/s200/ny2.JPG';
dia4ImageMini[2] = 'http://4.bp.blogspot.com/-GrF5Al2aUB8/T0OmawfjHOI/AAAAAAAABIs/sX54KsU_OcE/s200/ny3.JPG';
dia4ImageMini[3] = 'http://3.bp.blogspot.com/-pNFDuIbBPCc/T0OmfTqQEnI/AAAAAAAABI4/Kv5B6aAO4Wo/s200/ny4.JPG';
dia4ImageMini[4] = 'http://2.bp.blogspot.com/-5MTeZzN4pQM/T0OmnbX7WMI/AAAAAAAABJE/WdpLS11XUHI/s200/ny5.JPG';
dia4ImageMini[5] = 'http://1.bp.blogspot.com/-O_4X_1MvD-M/T0OmsV5SK-I/AAAAAAAABJQ/n5LIQM49z3k/s200/ny6.JPG';
dia4ImageMini[6] = 'http://2.bp.blogspot.com/-vNG_l4UG2Dk/T0OmxZB_aII/AAAAAAAABJc/aeLDGuDoaqE/s200/ny7.JPG';
dia4ImageMini[7] = 'http://4.bp.blogspot.com/-WvaqDGC-SeQ/T0Om2N66SdI/AAAAAAAABJo/J8QBLv-avz4/s200/ny8.JPG';
dia4ImageMini[8] = 'http://2.bp.blogspot.com/-l70BsD24bXA/T0Om7uSCuUI/AAAAAAAABJ0/ZXXtlkJ_lVI/s200/ny9.JPG';
dia4ImageMini[9] = 'http://1.bp.blogspot.com/-weCI_pstlrk/T0OnAjslAcI/AAAAAAAABKA/1vbEfErEVfM/s200/ny10.JPG';
dia4ImageMini[10] = 'http://1.bp.blogspot.com/-DgYQ-sEOuak/T0OnHXH2c3I/AAAAAAAABKM/Ff4fNRkWgcw/s200/ny11.JPG';
dia4ImageMini[11] = 'http://1.bp.blogspot.com/-QsM8vnrWVDw/T0OnLSwaDHI/AAAAAAAABKY/Uih4j73qN_0/s200/ny12.JPG';
dia4ImageMini[12] = 'http://2.bp.blogspot.com/-I34QQFpLNFQ/T0OnPTOHMBI/AAAAAAAABKk/SuI6ESX8b3g/s200/ny13.JPG';
dia4ImageMini[13] = 'http://3.bp.blogspot.com/-ILrwQ5xe7yw/T0OnUEDdKQI/AAAAAAAABKw/SShw2Yl-e6I/s200/ny14.JPG';
dia4ImageMini[14] = 'http://3.bp.blogspot.com/-Lrr_ihZmO6U/T0OnZGqVAdI/AAAAAAAABK8/ciGi_Nn3RiY/s200/ny15.JPG';
dia4ImageMini[15] = 'http://3.bp.blogspot.com/-Fwoqk3rebeY/T0OnekWv7FI/AAAAAAAABLI/H1XcxZtcZIY/s200/ny16.JPG';
dia4ImageMini[16] = 'http://2.bp.blogspot.com/-UnZkSK83AJo/T0OniHWgctI/AAAAAAAABLU/YnR6SZYaAk4/s200/ny17.JPG';
dia4ImageMini[17] = 'http://1.bp.blogspot.com/-K6EUZGfl3V0/T0OnpC33MaI/AAAAAAAABLg/wikDVw7fqAA/s200/ny18.JPG';
dia4ImageMini[18] = 'http://2.bp.blogspot.com/-SV2_2p4XNFY/T0Onu2jxj8I/AAAAAAAABLs/b64z46c94xw/s200/ny19.JPG';
dia4ImageMini[19] = 'http://4.bp.blogspot.com/-3tN2Els9wII/T0On1DDyl_I/AAAAAAAABL4/2olR54N61tE/s200/ny20.JPG';

var dia4Lien = new Array();

dia4Lien[0] = 'http://3.bp.blogspot.com/-AKf5hkjNdn8/T0OmQnLvkBI/AAAAAAAABIU/wO7F9cv8UIc/s1600/ny1.JPG';
dia4Lien[1] = 'http://1.bp.blogspot.com/-4aRhi2PTVto/T0OmXZBO8LI/AAAAAAAABIg/_v-bCPGYzLk/s1600/ny2.JPG';
dia4Lien[2] = 'http://4.bp.blogspot.com/-GrF5Al2aUB8/T0OmawfjHOI/AAAAAAAABIs/sX54KsU_OcE/s1600/ny3.JPG';
dia4Lien[3] = 'http://3.bp.blogspot.com/-pNFDuIbBPCc/T0OmfTqQEnI/AAAAAAAABI4/Kv5B6aAO4Wo/s1600/ny4.JPG';
dia4Lien[4] = 'http://2.bp.blogspot.com/-5MTeZzN4pQM/T0OmnbX7WMI/AAAAAAAABJE/WdpLS11XUHI/s1600/ny5.JPG';
dia4Lien[5] = 'http://1.bp.blogspot.com/-O_4X_1MvD-M/T0OmsV5SK-I/AAAAAAAABJQ/n5LIQM49z3k/s1600/ny6.JPG';
dia4Lien[6] = 'http://2.bp.blogspot.com/-vNG_l4UG2Dk/T0OmxZB_aII/AAAAAAAABJc/aeLDGuDoaqE/s1600/ny7.JPG';
dia4Lien[7] = 'http://4.bp.blogspot.com/-WvaqDGC-SeQ/T0Om2N66SdI/AAAAAAAABJo/J8QBLv-avz4/s1600/ny8.JPG';
dia4Lien[8] = 'http://2.bp.blogspot.com/-l70BsD24bXA/T0Om7uSCuUI/AAAAAAAABJ0/ZXXtlkJ_lVI/s1600/ny9.JPG';
dia4Lien[9] = 'http://1.bp.blogspot.com/-weCI_pstlrk/T0OnAjslAcI/AAAAAAAABKA/1vbEfErEVfM/s1600/ny10.JPG';
dia4Lien[10] = 'http://1.bp.blogspot.com/-DgYQ-sEOuak/T0OnHXH2c3I/AAAAAAAABKM/Ff4fNRkWgcw/s1600/ny11.JPG';
dia4Lien[11] = 'http://1.bp.blogspot.com/-QsM8vnrWVDw/T0OnLSwaDHI/AAAAAAAABKY/Uih4j73qN_0/s1600/ny12.JPG';
dia4Lien[12] = 'http://2.bp.blogspot.com/-I34QQFpLNFQ/T0OnPTOHMBI/AAAAAAAABKk/SuI6ESX8b3g/s1600/ny13.JPG';
dia4Lien[13] = 'http://3.bp.blogspot.com/-ILrwQ5xe7yw/T0OnUEDdKQI/AAAAAAAABKw/SShw2Yl-e6I/s1600/ny14.JPG';
dia4Lien[14] = 'http://3.bp.blogspot.com/-Lrr_ihZmO6U/T0OnZGqVAdI/AAAAAAAABK8/ciGi_Nn3RiY/s1600/ny15.JPG';
dia4Lien[15] = 'http://3.bp.blogspot.com/-Fwoqk3rebeY/T0OnekWv7FI/AAAAAAAABLI/H1XcxZtcZIY/s1600/ny16.JPG';
dia4Lien[16] = 'http://2.bp.blogspot.com/-UnZkSK83AJo/T0OniHWgctI/AAAAAAAABLU/YnR6SZYaAk4/s1600/ny17.JPG';
dia4Lien[17] = 'http://1.bp.blogspot.com/-K6EUZGfl3V0/T0OnpC33MaI/AAAAAAAABLg/wikDVw7fqAA/s1600/ny18.JPG';
dia4Lien[18] = 'http://2.bp.blogspot.com/-SV2_2p4XNFY/T0Onu2jxj8I/AAAAAAAABLs/b64z46c94xw/s1600/ny19.JPG';
dia4Lien[19] = 'http://4.bp.blogspot.com/-3tN2Els9wII/T0On1DDyl_I/AAAAAAAABL4/2olR54N61tE/s1600/ny20.JPG';

var dia4Titre = new Array()

dia4Titre [0] = 'Titre 1';
dia4Titre [1] = 'Titre 2';
dia4Titre [2] = 'Titre 3';
dia4Titre [3] = 'Titre 4';
dia4Titre [4] = 'Titre 5';
dia4Titre [5] = 'Titre 6';
dia4Titre [6] = 'Titre 7';
dia4Titre [7] = 'Titre 8';
dia4Titre [8] = 'Titre 9';
dia4Titre [9] = 'Titre 10';
dia4Titre [10] = 'Titre 11';
dia4Titre [11] = 'Titre 12';
dia4Titre [12] = 'Titre 13';
dia4Titre [13] = 'Titre 14';
dia4Titre [14] = 'Titre 15';
dia4Titre [15] = 'Titre 16';
dia4Titre [16] = 'Titre 17';
dia4Titre [17] = 'Titre 18';
dia4Titre [18] = 'Titre 19';
dia4Titre [19] = 'Titre 20';

var dia4Legende = new Array()

dia4Legende [0] = 'Légende 1';
dia4Legende [1] = 'Légende 2';
dia4Legende [2] = 'Légende 3';
dia4Legende [3] = 'Légende 4';
dia4Legende [4] = 'Légende 5';
dia4Legende [5] = 'Légende 6';
dia4Legende [6] = 'Légende 7';
dia4Legende [7] = 'Légende 8';
dia4Legende [8] = 'Légende 9';
dia4Legende [9] = 'Légende 10';
dia4Legende [10] = 'Légende 11';
dia4Legende [11] = 'Légende 12';
dia4Legende [12] = 'Légende 13';
dia4Legende [13] = 'Légende 14';
dia4Legende [14] = 'Légende 15';
dia4Legende [15] = 'Légende 16';
dia4Legende [16] = 'Légende 17';
dia4Legende [17] = 'Légende 18';
dia4Legende [18] = 'Légende 19';
dia4Legende [19] = 'Légende 20';

var dia4compteur = parseInt(Math.random()*dia4Image.length);
var dia4action = 16;var dia4debut=1;
var dia4secondes=1.5;var dia4premimage=0;var dia4nbminis=8;
var dia4seriemax=parseInt((dia4Image.length)/dia4nbminis);
if ((dia4Image.length/dia4nbminis) > dia4seriemax){dia4seriemax=dia4seriemax+1};
function dia4serieprec() {dia4compteur=dia4premimage-dia4nbminis;
if (dia4compteur<=0){dia4compteur=((dia4seriemax*dia4nbminis)-dia4nbminis+1)};
if (dia4action == 16) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur-1;};
if (dia4action == 15) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur+dia4nbminis;
if (dia4compteur > dia4Image.length){dia4compteur=dia4Image.length+1}};dia4changer();}
function dia4seriesuiv() {dia4compteur=dia4premimage+dia4nbminis;
if (dia4compteur>=(dia4Image.length+1)){dia4compteur=1};
if (dia4action == 16) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur-1;};
if (dia4action == 15) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur+dia4nbminis;
if (dia4compteur > dia4Image.length){dia4compteur=dia4Image.length+1}};dia4changer();}
function dia4appelnumero(dia4numero) {dia4compteur=dia4numero+dia4premimage-1;if (dia4compteur >= dia4Image.length+1) {dia4compteur = dia4compteur-dia4premimage+1};
dia4action = 1;dia4changer();}
function dia4boutonappelnumero(dia4numero) {dia4compteur=dia4numero;dia4action = 1;dia4changer();}
function dia4avant() {dia4action = 16;clearTimeout(dia4intervalle);dia4changer();}
function dia4arriere() {dia4action=15;clearTimeout(dia4intervalle);dia4changer();}
function dia4premiere() {dia4compteur=1;dia4action = 1;dia4changer();}
function dia4derniere() {dia4compteur=(dia4Image.length);dia4action = 2;dia4changer();}
function dia4stop() {dia4action = 1;dia4changer();}
function dia4precedente() {dia4compteur = dia4compteur - 1;
if (dia4action == 16) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur-1;};
if (dia4action == 15) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur+1;};dia4changer();}
function dia4suivante() {dia4compteur++;
if (dia4action == 16) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur-1;};
if (dia4action == 15) {clearTimeout(dia4intervalle);dia4compteur=dia4compteur+1;};dia4changer();}
function dia4demarrage() {document.write('<img style="display:none;" border="0" name="dia4defil2" />');document.write('<a href="#" onclick="window.open(dia4Lien[dia4compteur-1]);return(false)"><img class="dia4aff-im-princ" name="dia4defil" /></a>');dia4changer();}
function dia4changer(){
if (dia4action >= 15){dia4intervalle = setTimeout("dia4changer()",(1000*dia4secondes))};
dia4secondes=4;
if (dia4action == 16) dia4compteur++;
if (dia4action == 15) {dia4compteur=dia4compteur-1};
if (dia4compteur == 0) {dia4compteur = dia4Image.length};
if (dia4compteur == (dia4Image.length+1)) {dia4compteur = 1};
if (dia4debut==0) {
var dia4compteur2 = dia4compteur-1;
var dia4compteur3 = dia4compteur+1;
if (dia4compteur2 == 0) {dia4compteur2 = dia4Image.length};
if (dia4compteur3 == (dia4Image.length+1)) {dia4compteur3 = 1};
document.dia4defil2.src = dia4Image[dia4compteur2-1];
document.dia4defil2.src = dia4Image[dia4compteur3-1];
var dia4premimage2= parseInt((dia4compteur-1)/dia4nbminis)*dia4nbminis+1;
if (dia4premimage != dia4premimage2){dia4premimage=dia4premimage2;dia4boucle()};
};dia4debut=0;
document.getElementById('dia4affichage_titre').innerHTML = dia4Titre [dia4compteur-1];
document.getElementById('dia4affichage_legendes').innerHTML = dia4Legende [dia4compteur-1];
var dia4numeromax=dia4premimage+dia4nbminis-1;
if (dia4numeromax > dia4Image.length){dia4numeromax=dia4Image.length};
document.getElementById('dia4affichage_numero').innerHTML = (dia4compteur+" / "+dia4Image.length+" ("+dia4premimage+"- "+dia4numeromax+")");
document.dia4defil.src = dia4Image[dia4compteur-1];}
function dia4boucle() {var dia4variable=0;var dia4min =0+dia4premimage;
var dia4max =dia4nbminis+dia4premimage;
for(var i = dia4min ; i < dia4max ; i++)
{dia4variable=i-dia4premimage+1;
dia4variable="dia4-"+dia4variable;
var j=i;if (j >= (dia4Image.length+1)) {j = j-dia4premimage+1};
document.getElementById(dia4variable).src = dia4ImageMini[j-1];}}
</script><center><!--[if IE]><div style="margin-top:15px;">
</div>
<![endif]--><div id="dia4affichage_iframe">
<div id="dia4affichage_titre">
<span style="color:#333;">.</span></div>
<script language="javascript">dia4demarrage()</script><div id="dia4affichage_legendes">
<span style="color:#333;">.</span></div>
<img class="dia4miniatures" id="dia4-1" onclick="dia4appelnumero(1);"/><img class="dia4miniatures" id="dia4-2" onclick="dia4appelnumero(2);"/><img class="dia4miniatures" id="dia4-3" onclick="dia4appelnumero(3);"/><img class="dia4miniatures" id="dia4-4" onclick="dia4appelnumero(4);"/><img class="dia4miniatures" id="dia4-5" onclick="dia4appelnumero(5);"/><img class="dia4miniatures" id="dia4-6" onclick="dia4appelnumero(6);"/><img class="dia4miniatures" id="dia4-7" onclick="dia4appelnumero(7);"/><img class="dia4miniatures" id="dia4-8" onclick="dia4appelnumero(8);"/><!--[if IE]><div style="margin-top:10px;">
</div>
<![endif]--><div class"dia4affichage_onglets" style="margin-top:0px;">
<input type="button" class="dia4onglets" value="&lt;&lt;" onclick="dia4arriere();"/><input type="button" class="dia4onglets" value="l&lt;" onclick="dia4premiere();"/><input type="button" class="dia4onglets" value="&#x2191;" onclick="dia4serieprec();"/><input type="button" class="dia4onglets" value="&lt;" onclick="dia4precedente();"/><input type="button" class="dia4onglets" style="width:55px;" name="automat" value="Stop" onclick="dia4stop();"/><input type="button" class="dia4onglets" value="&gt;" onclick="dia4suivante();"/><input type="button" class="dia4onglets" value="&#x2193;" onclick="dia4seriesuiv();"/><input type="button" class="dia4onglets" value="&gt;l" onclick="dia4derniere();"/><input type="button" class="dia4onglets" value="&gt;&gt;" onclick="dia4avant();"/><span style="margin:0;padding:0;font-size:14px;font-weight:bold;position:absolute;" id="dia4affichage_numero"></span></div>
<div id="dia4affichage_boutons">
<input type="button" class="dia4boutons" title="1" onclick="dia4boutonappelnumero(1);"/><input type="button" class="dia4boutons" title="2" onclick="dia4boutonappelnumero(2);"/><input type="button" class="dia4boutons" title="3" onclick="dia4boutonappelnumero(3);"/><input type="button" class="dia4boutons" title="4" onclick="dia4boutonappelnumero(4);"/><input type="button" class="dia4boutons" title="5" onclick="dia4boutonappelnumero(5);"/><input type="button" class="dia4boutons" title="6" onclick="dia4boutonappelnumero(6);"/><input type="button" class="dia4boutons" title="7" onclick="dia4boutonappelnumero(7);"/><input type="button" class="dia4boutons" title="8" onclick="dia4boutonappelnumero(8);"/><input type="button" class="dia4boutons" title="9" onclick="dia4boutonappelnumero(9);"/><input type="button" class="dia4boutons" title="10" onclick="dia4boutonappelnumero(10);"/><input type="button" class="dia4boutons" title="11" onclick="dia4boutonappelnumero(11);"/><input type="button" class="dia4boutons" title="12" onclick="dia4boutonappelnumero(12);"/><input type="button" class="dia4boutons" title="13" onclick="dia4boutonappelnumero(13);"/><input type="button" class="dia4boutons" title="14" onclick="dia4boutonappelnumero(14);"/><input type="button" class="dia4boutons" title="15" onclick="dia4boutonappelnumero(15);"/><input type="button" class="dia4boutons" title="16" onclick="dia4boutonappelnumero(16);"/><input type="button" class="dia4boutons" title="17" onclick="dia4boutonappelnumero(17);"/><input type="button" class="dia4boutons" title="18" onclick="dia4boutonappelnumero(18);"/><input type="button" class="dia4boutons" title="19" onclick="dia4boutonappelnumero(19);"/><input type="button" class="dia4boutons" title="20" onclick="dia4boutonappelnumero(20);"/></div>
</div>
</center>
<div style="clear:both;">
</div>
<br/>

Comment ajouter un gadget HTML/JavaScript sur un blog.

4 commentaires:

Alcapone Livresacentalheure a dit…

Bonsoir,
Et encore merci pour vos tutos très utiles. J'aurais une question au sujet du diaporama (exemple 4) : j'ai créé un gadget intégrant votre code. Je l'ai adapté avec mes sources et j'ai supprimé les lignes de code pour les images en plus (c'est à dire que j'ai placé seulement 5 images au lieu de 20). Malheureusement le diaporama ne s'affiche pas. Auriez-vous la gentillesse de me dire s'il y a d'autres "variables " à modifier dans le code ?
Par avance, je vous remercie pour votre aide.
Alcapone

Meiser a dit…

Bonjour.

Pour tester efficacement un code, il faut repartir du code original, apporter les corrections une par une, et voir à chaque étape si cela fonctionne. Si la modification qui bloque le gadget est identifiée, on pourra déterminer ce qui peut être amélioré.


Alcapone Livresacentalheure a dit…

Oui, c'est ce que j'ai fait : j'ai utilisé un éditeur de code pour tester les modifications une à une et cela fonctionne. Par contre, le temps de chargement est très long. Comment faire pour réduire ce temps de chargement ?
Merci pour votre éventuelle réponse.

Meiser a dit…

Bonjour.

Cela fonctionne-t-il correctement sans modification ? Le code proposé charge une image à la fois, ce qui diminue le temps de chargement : il n'y a pas de chargement de tout un fichier au départ.

IL faut ensuite refaire les modifications une par une et voir à quel moment cela ralentit.