Ajouter Slides à mon site

Abdelcris Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   -  
DerkoFR Messages postés 505 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je cherche un code open source pour faire défiler 3 a 4 images au niveau de l'entête de mon site.
je veux pas installer un module, j'ai peur car mon site est sous spip (que je ne maitrise pas beaucoup) avec plus de 985 000 articles.
Le site auquel je m'inspire est ce-ci: zankeyfaba.gtenf.org
L'ajout des slider permettra sans doute de donner une image nouvelle à mon site.
Merci d'avance ! Au secours !!!
A voir également:

1 réponse

DerkoFR Messages postés 505 Date d'inscription   Statut Membre Dernière intervention   74
 
Bonjour,

Donne moi le code source de la page ou tu veut le mettre ;)
Je t'en créer un avec un petit tutoriel qui suis.

________________________________
Bonne journée

1
Abdelcris Messages postés 28 Date d'inscription   Statut Membre Dernière intervention  
 
Merci d'avance !

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<BOUCLE_article_principal(ARTICLES) {id_article}>
<title>[(#TITRE|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#INTRODUCTION|couper{150}|textebrut)" />]
</BOUCLE_article_principal>
<meta name="author" content="Dramane DARAVE">
<link rel='stylesheet' id='style-css' href='squelettes/menucss.css' type='text/css' media='all' />

<style type="text/css">
<!--
body {margin: 0px; padding: 0px;}
a:link {color: #2c3651;}
a:visited {color: #1f5b8b;}
a:hover {color: #2c3651;}
a:active {color: #2c3651;}
.Normal-P
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400;
}
.Normal-P0
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
}
.Normal-T
{
font-family:"Verdana", sans-serif; font-size:24.0px;
line-height:1.21em;
}
.Normal-C
{
font-family:"Verdana", sans-serif; font-size:11.0px;
line-height:1.21em;
}
.Normal-C0
{
font-family:"Verdana", sans-serif; font-weight:700; font-size:13.0px;
line-height:1.23em; color:#A3552F;
}
.Normal-C1
{
font-family:"Verdana", sans-serif; font-size:12.0px;
line-height:1.23em;
}
.Normal-C2
{
font-family:"Verdana", sans-serif; font-size:9.0px; line-height:1.33em;
}
.Normal-C3
{
font-family:"Verdana", sans-serif; font-size:11.0px;
line-height:1.18em;
}
.Normal-C4
{
font-family:"Verdana", sans-serif; font-weight:700; font-size:13.0px;
line-height:1.23em;
}
-->
</style>
<script type="text/javascript"><!--
var blankSrc = "rocare/wpscripts/blank.gif";
--></script>
<script src="rocare/wpscripts/jspngfix.js" type="text/javascript"></script>
<script src="rocare/wpscripts/jsRollover.js" type="text/javascript">
</script>

</head>

<body text="#000000" style="background: #e0e0e0; text-align:left; height:1500px;">
<div style="background: transparent; position:relative;width:1000px;height:1500px;margin-left:auto;margin-right:auto;">
<div style="position:absolute; left:-100px; top:1px; width:866px; height:650px;">
<img src="rocare/wpimages/wp90ccb0ff_0f.jpg" width="866" height="650" border="0" id="pic_2" name="pic_2" title="" alt=""></div>
<div style="position:absolute; left:-20px; top:60px; width:1040px; height:1460px;">
<img src="rocare/wpimages/wp2dd35a4e.png" width="1040" height="1400" border="0" id="qs_1" name="qs_1" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="txt_1_C01" style="position:absolute; left:140px; top:13px; width:674px; height:75px;">
<div class="Normal-P">
<span class="Normal-T">Réseau Ouest et Centre Africain <br></span>
<span class="Normal-T">de Recherche en Education (ROCARE)</span></div>
</div>
<ul id="menu-ro" style="position:absolute; left:50px; top:110px;">
<li><a href="http://www.ernwaca.org/web/-Reseau-Ouest-et-Centre-Africain-de-">Accueil</a> </li>

<li><a href="http://www.ernwaca.org/web/A-propos-du-ROCARE">A propos</a> </li>

<li><a href="http://www.ernwaca.org/web/-Projets-de-recherche-">Projets de recherche</a></li>

<li><a href="http://www.ernwaca.org/web/Partenaires-du-ROCARE">Partenaires</a></li>

<li><a href="http://www.ernwaca.org/web/-Forum-">Forum</a></li>

<li><a href="http://www.ernwaca.org/web/-Gallery-">Galery</a></li>

<li><a href="http://www.ernwaca.org/web/Contactez-nous">Contacts</a></li>

</ul>
<div style="position:absolute; left:860px; top:80px; width:113px; height:99px;">
<a href="http://www.ernwaca.org/web/-Reseau-Ouest-et-Centre-Africain-de-"><img src="rocare/wpimages/wp33dcb63b_0f.jpg" width="150" height="99" border="0" id="pic_3" name="pic_3" title="" alt=""></a></div>
<div style="position:absolute; left:40px; top:150px; width:570px; height:1237px;">
<img src="rocare/wpimages/wp189d4adf.png" width="570" height="1237" border="0" id="qs_7" name="qs_7" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:630px; top:415px; width:210px; height:359px;">
<img src="rocare/wpimages/wpadf7436c.png" width="210" height="359" border="0" id="qs_2" name="qs_2" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="txt_3_C01" style="position:absolute; left:658px; top:425px; width:156px; height:43px;">
<div class="Normal-P">
<span class="Normal-C0">Coordinations nationales</span></div>
</div>
<div style="position:absolute; left:640px; top:465px; width:190px; height:279px;">
<img src="rocare/wpimages/wp520a9d77.png" width="190" height="279" border="0" id="qs_6" name="qs_6" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:680px; top:475px; width:135px; height:256px;">
<div class="Normal-P0">
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Benin-" style="text-decoration:none;">Bénin</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Burkina-Faso-" style="text-decoration:none;">Burkina Faso</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Cameroun-" style="text-decoration:none;">Cameroun</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Republique-Centrafricaine-" style="text-decoration:none;">Centrafrique, Rép</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Congo-" style="text-decoration:none;">Congo</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Cote-d-Ivoire-" style="text-decoration:none;">Côte d'ivoire</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Gambie-" style="text-decoration:none;">Gambie</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Ghana-" style="text-decoration:none;">Ghana</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Guinee-" style="text-decoration:none;">Guinée Conakry</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Guinee-Bissau-" style="text-decoration:none;">Guinée Bissau</a><br></span>

<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Mali-" style="text-decoration:none;">Mali</a><br><a href="http://www.ernwaca.org/web/-Mauritanie-" style="text-decoration:none;">Mauritanie</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Niger-" style="text-decoration:none;">Niger</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Nigeria-" style="text-decoration:none;">Nigeria</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Senegal-" style="text-decoration:none;">Sénégal</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Sierra-Leone-" style="text-decoration:none;">Sierra Leone</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/-Togo-" style="text-decoration:none;">Togo</a></span></div>
</div>
<div style="position:absolute; left:886px; top:415px; width:112px; height:160px;">
<a href="http://www.ernwaca.org/web/Bulletin-d-informations-Nouvelles"><img src="rocare/wpimages/wp9b87b75b.jpg" width="112" height="160" border="0" id="pic_5" name="pic_5" title="" alt=""></a></div>
<div style="position:absolute; left:885px; top:583px; width:117px; height:165px;">
<a href="http://www.ernwaca.org/biblio/opac_css/index.php?&lvl=categ_see&id=49&main=1&id_thes=1"><img src="rocare/wpimages/wp9ffc7f6f.jpg" width="117" height="165" border="0" id="pic_6" name="pic_6" title="" alt=""></a></div>
<div style="position:absolute; left:885px; top:756px; width:117px; height:176px;">
<a href="http://www.rocare.org/ChangingMindsets/"><img src="rocare/wpimages/wp6b080506.jpg" width="117" height="176" border="0" id="pic_7" name="pic_7" title="" alt=""></a></div>
<div style="position:absolute; left:887px; top:937px; width:115px; height:162px;">
<a href="http://www.ernwaca.org/biblio/opac_css/index.php?&lvl=categ_see&id=59&main=1&id_thes=1"><img src="rocare/wpimages/wpe79e569a.jpg" width="115" height="162" border="0" id="pic_8" name="pic_8" title="" alt=""></a></div>
<div style="position:absolute; left:890px; top:1100px; width:115px; height:137px;">
<a href="http://www.rocare.org/guide-tic/"><img src="rocare/wpimages/wpe81770ee.jpg" width="115" height="137" border="0" id="pic_9" name="pic_9" title="" alt=""></a></div>
<div style="position:absolute; left:890px; top:1251px; width:113px; height:105px;">
<a href="http://www.rocare.org/colloque2009/fr/"><img src="rocare/wpimages/wp07bab503.jpg" width="113" height="105" border="0" id="pic_10" name="pic_10" title="" alt=""></a></div>
<div id="txt_5_C01" style="position:absolute; left:776px; top:16px; width:180px; height:21px;">
<div class="Normal-P0">
<span class="Normal-C2"><a href="http://www.ernwaca.org/web/-Website-Educational-Research-">English</a> |  <a href="http://www.ernwaca.org/web/spip.php?page=plan">Plan</a> | <a href="http://www.ernwaca.org/web/spip.php?page=backend">RSS 2.0</a> | <a href="https://twitter.com/rocare">Twitter</a></span></div>
</div>
<div id="txt_6_C01" style="position:absolute; left:182px; top:1403px; width:471px; height:30px;">
<div class="Normal-P0">
<span class="Normal-C1">Copyright© ROCARE 2011</span><span class="Normal-C3"><br></span>
<span class="Normal-C3"><a href="http://www.ernwaca.org/web/spip.php?page=plan">Plan</a> | <a href="http://www.ernwaca.org/web/spip.php?page=login&url=%2Fweb%2Fecrire%2F">Administration</a> | <a href="http://www.ernwaca.org/newsletter/subscribe.php">Listes de diffusion</a> | <a href="http://www.ernwaca.org/web/spip.php?page=backend">RSS 2.0</a></span></div>
</div>
<div style="position:absolute; left:817px; top:47px; width:143px; height:22px; text-align:left;">
<form action="https://www.google.com/webhp?gws_rd=ssl" method="get" name="searchform" target="_blank" id="searchform">
<input type="hidden" name="as_sitesearch" value="www.ernwaca.org" />
<label>
<input name="as_q" type="text" id="as_q" class="stitre" size="19" style="width:143px;" />
</label>
</form></div>
<div id="txt_7" style="position:absolute; left:20px; top:249px; width:578px; height:1121px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:auto;">
<blockquote>

<span class="Normal-C0" align="left"><BOUCLE_articles(ARTICLES) {id_article}> #DEBUT_SURLIGNE#TITRE#FIN_SURLIGNE[(#LOGO_ARTICLE_RUBRIQUE|right||image_reduire{250,250})] </span>
<div>
<span class="Normal-C" align="left">[(#DATE|nom_jour)] [(#DATE|affdate)] </span>
</div>
<span class="Normal-C" align="left"><br />
</span>
<div>
<span class="Normal-C" align="left"><INCLURE{fond=traduction_fr}{id_article}{id_rubrique}> </span>

</div>
<span class="Normal-C" align="left"><br /><br />
[</span>
<div>
<span class="Normal-C" align="left">(#CHAPO)</span>
</div>
<span class="Normal-C" align="left">]
#DEBUT_SURLIGNE(#TEXTE)#FIN_SURLIGNE
[</span>
<div>
<span class="Normal-C" align="left">(#PS)</span>
</div>
<div>

</div>

<span class="Normal-C" align="left">]

</span>
<div>
<span class="Normal-C" align="left"> [(#NOTES)]</span>
</div>


<div style="width: 100%;">
[(#REM) Forum de l'article ]
<INCLURE{fond=inclure/forum,id_article} />
[<h2><:forum:form_pet_message_commentaire:></h2>
(#FORMULAIRE_FORUM)]
</div>



</BOUCLE_articles>
</blockquote>
</div>
<div id="txt_8_C01" style="position:absolute; left:121px; top:157px; width:313px; height:71px;">
<div class="Normal-P0">
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/Conseil-d-administration-du-ROCARE" style="text-decoration:none;">Conseil d'administration</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/Comites-scientifiques-du-ROCARE" style="text-decoration:none;">Comités scientifiques</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/Comite-de-mobilisation-des" style="text-decoration:none;">Comité de mobilisation de ressources</a><br></span>
<span class="Normal-C1"><a href="http://www.ernwaca.org/web/Secretariat-Executif-du-ROCARE" style="text-decoration:none;">Secrétariat Exécutif</a></span></div>
</div>
<div style="position:absolute; left:632px; top:785px; width:170px; height:176px;">
<map id="map0" name="map0">
<area shape="rect" coords="18,60,158,131" href="http://www.ernwaca.org/biblio/opac_css/" alt="">
</map>
<img src="rocare/wpimages/wp9ce3335f.png" width="210" height="176" border="0" id="pic_12" name="pic_12" title="" alt="" onload="OnLoadPngFix()" usemap="#map0"></div>
<div id="txt_9_C01" style="position:absolute; left:660px; top:787px; width:144px; height:37px;">
<div class="Normal-P">
<span class="Normal-C0">Bibliothèque virtuelle</span></div>
</div>
<div style="position:absolute; left:632px; top:970px; width:210px; height:176px;">
<img src="rocare/wpimages/wp162b0d82.png" width="210" height="176" border="0" id="qs_122" name="qs_122" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="txt_10_C01" style="position:absolute; left:665px; top:985px; width:144px; height:37px;">
<div class="Normal-P">
<span class="Normal-C0">Intranet</span></div>
</div>
<div style="position:absolute; left:648px; top:1013px; width:140px; height:93px;">
<map id="map1" name="map1">
<area shape="poly" coords="139,92,139,0,0,0,0,92,22,93" href="http://www.ernwaca.org/intranet/" alt="">
</map>
<img src="rocare/wpimages/wpe652723f.png" width="183" height="110" border="0" id="pic_14" name="pic_14" title="" alt="" onload="OnLoadPngFix()" usemap="#map1"></div>
<div style="position:absolute; left:890px; top:1378px; width:112px; height:86px;">
<a href="https://www.norrag.org/"><img src="rocare/wpimages/wp082318f3.jpg" width="99" height="66" border="0" id="pic_15" name="pic_15" title="" alt=""></a></div>
<div style="position:absolute; left:665px; top:1160px; width:172px; height:86px;">
<a href="https://www.eda.admin.ch/eda/de/home.html"><img src="rocare/wpimages/suisse.png" width="160" height="76" border="0" id="pic_15" name="pic_15" title="" alt=""></a></div>
<div style="position:absolute; left:710px; top:1240px; width:172px; height:163px;">
<a href="https://www.uemoa.int/"><img src="rocare/wpimages/exlogouemoa.jpg" width="122" height="120" border="0" id="pic_15" name="pic_15" title="" alt=""></a></div>
<div style="position:absolute; left:730px; top:1375px; width:172px; height:163px;">
<a href="https://www.sida.se/English/"><img src="rocare/wpimages/sida.png" width="120" height="70" border="0" id="pic_15" name="pic_15" title="" alt=""></a></div>

<div style="position:absolute; left: 630px; top: 180px; width: 385px; height: 166px;">

<iframe width="380" height="230" src="//www.youtube.com/embed/6fr6ElBRXpU?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>


</body>

</html>
0
Abdelcris Messages postés 28 Date d'inscription   Statut Membre Dernière intervention  
 
Merci pour votre reaction rapide DerkoFR, votre aide sera vraiment precieux pour moi !
0
DerkoFR Messages postés 505 Date d'inscription   Statut Membre Dernière intervention   74
 
Vous inquietez pas ;) par contre il me faut aussi le css

Bon je vous donne un tuto si vous arriver pas je vous aide ;)
https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Ps : vous voulez le mettre ou votre slide ?
0
Abdelcris Messages postés 28 Date d'inscription   Statut Membre Dernière intervention  
 
si vous jetez un coup d'oeil sur le site : http://www.ernwaca.org/web/-Website-Educational-Research-
juste en bas du menu.

Merci de nouveau !
0
Abdelcris Messages postés 28 Date d'inscription   Statut Membre Dernière intervention  
 
je suis entrain de lire et appliquer le tuto je vous reviens...
0