Slideshow en accordéon
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Slideshow en accordéon
Bonjour o/
J'aimerais pourvoir faire cette slide show et la poster dans un message. Les codes sont en utilisation libre, mais je ne sais pas comment faire pour l'utiliser. Je n'arrive pas à faire l'iframe et à changer les code pour forumactif.
Voici le code html pour les vignettes et leurs descriptions
voici le code css
merci d'avance o/
J'aimerais pourvoir faire cette slide show et la poster dans un message. Les codes sont en utilisation libre, mais je ne sais pas comment faire pour l'utiliser. Je n'arrive pas à faire l'iframe et à changer les code pour forumactif.
Voici le code html pour les vignettes et leurs descriptions
- Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>InfoGrid</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/infogrid.js"></script>
</head>
<body>
<style type="text/css" style="display: none;">.bsa_it_ad{border:0 !important;padding:6px !important;overflow:hidden !important;background:#eae3c0 !important;-moz-box-shadow:0 0 48px black;-webkit-box-shadow:0 0 48px black;box-shadow:0 0 48px black;}.bsa_it_ad a{margin:0 !important;padding:0 !important}.bsa_it_ad a img{border:0 !important;position:static !important}.bsa_it_ad a:hover img{margin:0 !important}.bsa_it_ad a:hover{background:none !important}.bsa_it_i{margin:0 15px 0 0 !important}.bsa_it_t{margin:12px 0 0 0 !important;font:16px Georgia,Serif !important}.bsa_it_d{font:11px Verdana,Helvetica,Arial,Sans-Serif;padding-right:10px}.bsa_it_p{display:none !important;}#bsap_aplink{position: absolute; color: #999; text-decoration: none; bottom:5px !important;right:5px !important;padding:0 !important}.bsa_it_p a:hover{background:none !important}</style><div id="hook-just-in-case" style="height: 77px; background: black url(/examples/images/examples-header-bg.png) repeat-x; color: white !important; font: 14px Georgia, Serif !important; position: relative; zoom: 1; width: 100% !important; z-index: 6000;"><div style="width: 960px; height: 77px; margin: 0 auto; position: relative;"><img src="/examples/images/example-logo.png" alt="Demo Page" style="position: absolute; top: 0; left: 0;"><div style="position: absolute; left: 140px; top: 52px; width: 400px; text-align: left;"><a class="header-button" href="http://css-tricks.com">← Back Home</a> <a class="header-button" href="http://css-tricks.com/downloads/">Other Demos →</a></div><div style="width: 420px; position: absolute; right: 0; top: 0;"><div id="bsap_1255488" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div>
<div id="page-wrap">
<div class="info-col">
<h2>Superman</h2>
<a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
<dl>
<dt>Super Power</dt>
<dd><a href="http://css-tricks.com">Consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Batman</h2>
<a class="image batman" href="http://jprart.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Aquaman</h2>
<a class="image aquaman" href="http://www.deviantart.com/print/8342014/">View Image</a>
<dl>
<dt id="starter">Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Spiderman</h2>
<a class="image spiderman" href="http://eldelgado.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Ironman</h2>
<a class="image ironman" href="http://diablo2003.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
</div>
</body>
</html>
voici le code css
- Code:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #eee; }
body { font: 14px Georgia, serif; }
#page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }
.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }
.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }
.batman { background: url(../images/batman.jpg) center center no-repeat; }
.spiderman { background: url(../images/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(../images/aquaman.jpg) center center no-repeat; }
.ironman { background: url(../images/ironman.jpg) center center no-repeat; }
.superman { background: url(../images/superman.jpg) center center no-repeat; }
dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }
dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }
dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }
dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }
dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }
dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }
dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
merci d'avance o/
Dernière édition par Kimi Kozuma le Mer 29 Juin 2011 - 20:54, édité 1 fois
Re: Slideshow en accordéon
Bonjour
Il faut déjà commencer par essayer de le faire fonctionner dans une page HTML.
Il faut héberger et mettre le lien correspondant pour le CSS (votre 2ème code)
et ensuite le mettre dans cette ligne (de votre premier code):
faire de même avec le javascript : infogrid.js il faut l'héberger au format js
et mettre le lien dans la ligne correspondante
*Cela ne fonctionnera pas dans un post (les scripts sont désactivés dans les messages ).
à moins de le mettre en Iframe.
Cordialement.
Il faut déjà commencer par essayer de le faire fonctionner dans une page HTML.
Il faut héberger et mettre le lien correspondant pour le CSS (votre 2ème code)
et ensuite le mettre dans cette ligne (de votre premier code):
- Code:
<link rel="stylesheet" type="text/css" href="ICI VOTRE CSS HEBERGE">
faire de même avec le javascript : infogrid.js il faut l'héberger au format js
et mettre le lien dans la ligne correspondante
- Code:
<script type="text/javascript" src="LE LIEN VERS infogrid.js"></script>
*Cela ne fonctionnera pas dans un post (les scripts sont désactivés dans les messages ).
à moins de le mettre en Iframe.
Cordialement.
Re: Slideshow en accordéon
Ben c'est justement ce que je veux faire! Mettre tout ça dans une iFrame, mais je ne sais pas comment faire.
Re: Slideshow en accordéon
Bonjour
Vous ne savez pas comment faire pour:
Que le code fonctionne?
Pour le mettre en iframe?
Quand votre code fonctionne dans une page html.
Vous pouvez l'insérez ensuite de cette manière
En changeant avec l'adresse de votre page ainsi que mettre vos tailles.
Cordialement.
Vous ne savez pas comment faire pour:
Que le code fonctionne?
Pour le mettre en iframe?
Quand votre code fonctionne dans une page html.
Vous pouvez l'insérez ensuite de cette manière
- Code:
<iframe src="votre adresse page.html" width="largeur" height="hauteur" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
En changeant avec l'adresse de votre page ainsi que mettre vos tailles.
Cordialement.
Re: Slideshow en accordéon
Je ne sais pas comment faire pour que le code fonctionne. J'ai mis tout ça dans une page html. Mais ça ne marche pas. ;o;
Re: Slideshow en accordéon
Bonjour
Vous avez hébergé le CSS et le javascript les liens images etc..?
Sinon collez tout votre code modifié ici
Cordialement.
Vous avez hébergé le CSS et le javascript les liens images etc..?
Sinon collez tout votre code modifié ici
Cordialement.
Re: Slideshow en accordéon
Héberger quoi ? Comment on fait ça ? O.O
Re: Slideshow en accordéon
Bonjour
Et bien vous ne pouvez pas récupérer un code comme ça le prendre le coller utiliser les mêmes images etc...et que cela fonctionne de suite...
Il faut modifier les textes et les images par les votres et donc hébergés celle ci.
Il faut aussi héberger le script infogrid.js le Css .
vous pouvez héberger tout ça chez archive host par exemple.
Et ensuite remplacer les différents liens par les vôtres.
Cordialement.
Et bien vous ne pouvez pas récupérer un code comme ça le prendre le coller utiliser les mêmes images etc...et que cela fonctionne de suite...
Il faut modifier les textes et les images par les votres et donc hébergés celle ci.
Il faut aussi héberger le script infogrid.js le Css .
vous pouvez héberger tout ça chez archive host par exemple.
Et ensuite remplacer les différents liens par les vôtres.
Cordialement.
Re: Slideshow en accordéon
Voilà, j'ai hébergé, je dois donner les liens de tout ça ? Et vous parlez de quel code modifié ?
Re: Slideshow en accordéon
Bonjour
Il faut remplacer les différents liens du code que vous donnez dans votre premier message: images css et javascript par les votres que vous avez hébergés
Cordialement.
Il faut remplacer les différents liens du code que vous donnez dans votre premier message: images css et javascript par les votres que vous avez hébergés
Cordialement.
Re: Slideshow en accordéon
ça ne marche toujours pas.
Re: Slideshow en accordéon
Bonjour
Pouvez vous poster votre code que vous avez modifié ici?
Cordialement.
Pouvez vous poster votre code que vous avez modifié ici?
Cordialement.
Re: Slideshow en accordéon
- Code:
<iframe src="http://butterfly.forumactif.fr/h1-infogrid" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no">
<link rel="stylesheet" type="text/css" href="http://www.archive-host.com/files/1090975/dba23ec3d70d62420740d4cf0b20a5d2de43d676/style.css"> <script type="text/javascript" src="http://www.archive-host.com/files/1090859/dba23ec3d70d62420740d4cf0b20a5d2de43d676/infogrid.js"></script> </iframe>
Re: Slideshow en accordéon
Bonsoir
Il ne faut pas l'insérer comme ceci.
et avant de l'insérer en iframe il faut être sur que le code fonctionne dans la page HTML ce qui n'est pas le cas.
Il faut aussi modifier le CSS et mettre les liens vers les images car ceci ne peut pas fonctionner .
Par exemple
Il faut
Voila ensuite le code avec le rajout de votre javascript il faudra changer le lien du CSS par le votre modifié.
Il faut donc modifier le CSS en mettant les liens vers les différentes images superman batman ironman etc...
hébergez ensuite de nouveau ce CSS modifié et insérez le dans le code que je vous donne en remplaçant ICI LE LIEN DE VOTRE CSS
puis testez si cela fonctionne dans la page html en prévisualisation.
*Vous pouvez essayer avec vos images en 320*100 de taille
Cordialement.
Il ne faut pas l'insérer comme ceci.
et avant de l'insérer en iframe il faut être sur que le code fonctionne dans la page HTML ce qui n'est pas le cas.
Il faut aussi modifier le CSS et mettre les liens vers les images car ceci ne peut pas fonctionner .
Par exemple
- Code:
.batman { background: url(../images/batman.jpg) center center no-repeat; }
Il faut
- Code:
.batman { background: url(ICI LE LIEN DE L'IMAGE HEBERGE) center center no-repeat; }
Voila ensuite le code avec le rajout de votre javascript il faudra changer le lien du CSS par le votre modifié.
- Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>InfoGrid</title>
<link rel="stylesheet" type="text/css" href="ICI LE LIEN DE VOTRE CSS">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.archive-host.com/files/1090859/dba23ec3d70d62420740d4cf0b20a5d2de43d676/infogrid.js"></script>
</head>
<body>
<div id="page-wrap">
<div class="info-col">
<h2>Superman</h2>
<a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
<dl>
<dt>Super Power</dt>
<dd><a href="http://css-tricks.com">Consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Batman</h2>
<a class="image batman" href="http://jprart.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Aquaman</h2>
<a class="image aquaman" href="http://www.deviantart.com/print/8342014/">View Image</a>
<dl>
<dt id="starter">Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Spiderman</h2>
<a class="image spiderman" href="http://eldelgado.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="info-col">
<h2>Ironman</h2>
<a class="image ironman" href="http://diablo2003.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
</div>
</body>
</html>
Il faut donc modifier le CSS en mettant les liens vers les différentes images superman batman ironman etc...
hébergez ensuite de nouveau ce CSS modifié et insérez le dans le code que je vous donne en remplaçant ICI LE LIEN DE VOTRE CSS
- Code:
<link rel="stylesheet" type="text/css" href="ICI LE LIEN DE VOTRE CSS">
puis testez si cela fonctionne dans la page html en prévisualisation.
*Vous pouvez essayer avec vos images en 320*100 de taille
Cordialement.
Re: Slideshow en accordéon
ça marche ! Merci beaucoup beaucoup *^*
Sujets similaires
» Slideshow Jquery
» Slideshow qui ne s'affiche pas correctement
» Soucie Slideshow
» Slideshow pour les news en page d'accueil.
» Flèches invisibles avec le tuto Slideshow
» Slideshow qui ne s'affiche pas correctement
» Soucie Slideshow
» Slideshow pour les news en page d'accueil.
» Flèches invisibles avec le tuto Slideshow
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum